移动端rem适配-JS

(function(){
    var deviceWidth = document.documentElement.clientWidth;   //设备像素宽度
    if(deviceWidth > 640){
         deviceWidth = 640;
    }
    document.documentElement.style.fontSize = deviceWidth*2 / 7.5 + ‘px‘;
})();

原文地址:https://www.cnblogs.com/boomupupup/p/9674602.html

时间: 2024-10-08 00:41:05

移动端rem适配-JS的相关文章

移动端rem适配 flex.js

(function() { document.addEventListener('DOMContentLoaded', function () { var html = document.documentElement; var windowWidth = html.clientWidth; html.style.fontSize = windowWidth / 7.5 + 'px'; //等价于html.style.fontSize = windowWidth / 750 * 100 + 'p

移动端Rem适配(基于vue-cli3 ,ui框架用的是vant-ui)

介绍postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 remlib-flexible 用于设置 rem 基准值 1.安装lib-flexible(用于设置 rem 基准值) npm i -S amfe-flexible 2.在main.js文件中引入lib-flexible import 'amfe-flexible' 3.安装postcss-pxtorem(postcss-pxtorem是一款 postcss 插件,用于将单位转化为 rem) npm instal

移动端REM适配

var html = document.getElementsByTagName("html")[0]; function getFontSize(){ var width=document.documentElement.clientWidth ||document.body.clientWidth+"px"; var fontSize=(100/750)*width; if(width>=750){ fontSize="100"; }

移动端rem.js适配屏幕

九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多说,今天就来谈谈移动端的rem适配...本文将从rem是什么.为什么要用rem适配.怎么用rem来讲解,保证浅显易懂... 1.什么是rem rem(font size of the root element)是指相对于根元素(<html>)的字体大小的单位.简单的说它就是一个相对单位.看到rem

移动端页面适配,rem布局

移动端页面适配 em 根据元素自身的字体大小来计算自己的尺寸 rem root em 根据根节点(html)的字体大小来计算自己的尺寸 适配: 各个移动设备,分辨率大小不一致,使我们的页面在各种分辨率下都显示完好(等比的缩放); 根据屏幕的分辨率 动态的设置html的字体大小,来达到页面等比缩放的功能 注意:保证html最终算出来的字体大小 不能小于 12 在最开始先设置一段js代码,获得屏幕宽度,这段js优先于任何css和js <script> (function() { var html

移动端使用rem适配及相关问题

移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案很受欢迎. rem定义及浏览器支持情况 rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们之间其

移动端最强适配(rem适配之px2rem)&amp;&amp; 移动端结合Vuex实现简单loading加载效果

一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 viewport --> 百分比 --> rem --> rem的升级版px2rem可谓是一把鼻涕一把泪啊 ,在px2rem之前总觉得之前的不够完美或者麻烦: 进入正题: 首先 px2rem 也是基于 rem  适配的,但是他的好用之处在于灵活.简便.高效不用我们自己去换算.px2rem-load

0082 rem适配方案:less+rem+媒体查询、flexible.js+rem

1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备. 2.使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化,元素尺寸也会发生变化,从而达到等比缩放的适配. 技术方案: 1.less+rem+媒体查询 2.flexible.js+rem 总结: 两种方案现在都存在,方案2 更简单,现阶段无需了解里面的js代码. rem实际开发适配方案1 ①假设设计稿是750px ②假设我们把整个屏幕划分为15等份(划分标准

移动端适配(3)---rem适配

rem适配 <meta name="viewport"  content="width=device-width,user-scalable=no"/> <script> (function(){ var html=document.documentElement; var hWidth=html.getBoundingClientRect().width; html.style.fontSize=hWidth/16+"px&quo