使用rem进行页面适配

想到写这个博客的时候，网上很多已经在吵着都2019了，还在用rem，都在用vw，emmm

1.rem的原理

众所周知rem的原理就是，值根据html根元素的大小而定，改变html的font-size大小便可改变元素的大小。

2.原理大家都一样，主要在动态改变html的font-size大小时，每个人的习惯不太一样。

网上有很多类似的博客，方法也很多

1.使用媒体查询，类似这种

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

2.借助sass,less等，类似这种

@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@px){@return @px / @baseFontSize * 1rem;
}
//使用示例：
.container {height: px2rem(240);
}
//less翻译结果：
.container {height: 3.2rem;
}

同时也要借助js动态设置html的font-size

let deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';window.onresize = function(){let deviceWidth = document.documentElement.clientWidth;document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
};

3.用工具，webpack，postcss,postcss-pxtorem

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

但配置好后，依然需要js来动态改变html的font-size

4.借助插件https://github.com/imochen/hotcss

不管哪种方法，所基于的原理都是一样的，最后说下自己最常用的方法

css的calc和js

html{font-size: calc(100vw / 7.5);
}

let deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';window.onresize = function(){let deviceWidth = document.documentElement.clientWidth;document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
};

此时设计稿大小为750px，用/100的方式可以很容易进行rem的换算，几乎不需要借助其他工具，直接设计稿大小除以100即可，并不觉得麻烦，所以一直在用　　

转载于:https://www.cnblogs.com/Anne3/p/11189015.html

使用rem进行页面适配相关推荐

前端页面适配的rem换算
为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...
关于手机端适配的问题（rem，页面缩放）
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...
前端怎么把px单位换成rem单位解决项目页面适配问题
先看没有适配前的效果,下面是没有适配前,使用的是px单位,代码和效果如下: <!DOCTYPE html> <html><head><meta charset ...
python四大软件-传智播客解析Python之移动端页面适配四大方式
前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?传智播客为此总结了四种方式,具体如下: 传智播客解析Python之移动端页面适配四大方式 ...
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同
移动端 H5 分屏页面适配问题单位问题肯定用rem, 为了方便计算,一般取 1rem=100px(设计稿px), 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 :移动端根据 ...
html5页面适配方法,H5案例分享：HTML5移动页面适配方法
HTML5移动页面适配方法之前做过PC页面时考虑最多的是兼容,这是因为浏览器之间的差异引起的.而移动端是基本没有"兼容"的问题了,全是CSS3,是不是很开心,但是开心早了,因为适 ...
js整体缩小网页_js实现整体缩放页面适配移动端
大家在适配页面的Web端和移动端时候,如果不需要那么麻烦,就可以使用js进行整体缩放,只需要引入一个js,改动htmll头部代码即可切记: 1.该 JS 应在 head 中尽可能早的引入,减少重绘. ...
关于H5页面适配的问题
1.问题描述适配的目标:在不同尺寸的手机设备上,页面"相对性的达到合理的展示(自适应)"或者"保持统一效果的等比缩放(看起来差不多,但不是完全等比例,对于字体我们并不喜 ...

使用rem进行页面适配

使用rem进行页面适配相关推荐

最新文章

热门文章