目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆。以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用户了。如何100%还原UI设计师的设计图,一直困扰着前端工程师。
学习首先我们简单了解下css目前都支持哪些单位:
具有弹性布局能力的单位:
从上可以看出,要做页面整体弹窗缩放的话,使用rem, vm, vw, vh更适合,因为任何内容都可以找到同一个基准。
viewport 是用户网页的可视区域。
手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通过以上可以看出,使用弹性布局的css单位配合设置html viewport元信息,就可以实现整体页面的弹性布局(包含字体大小)。
设备分辨率:一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值;
设备屏幕宽度:设备显示器的实际宽度;
DPR:设备上物理像素和设备独立像素(device-independent pixels (dips))的比例,DPR = 设备分辨率/设备屏幕宽度;
300ppi:每英寸300个像素点
根据以上的概念,那么,我们知道
window.devicePixelRatio = document.body.clientWidth / window.screen.width;
如果屏幕分辨率宽是1080px,屏幕宽度为360px,那么DPR=1080/360=3。
如果现在UI设计图也是1080px,那么前端工程师不想丢失任何细节的使用代码如何还原呢?
可以设置屏幕宽度为1080px, 设置viewport属性initial-scale = 1/3;
这样360px的屏幕就可以容纳1080px宽的内容了。
但是每个手机的分辨率都不一样,那么如何来设置这个这个initial-scale呢?我们可以通过以下方式:
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'user-scalable=no,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale);
将user-scalable设置为no, 不允许缩放,有缩放需要的,可以不设置
之后如何设置某一个区块的宽,高,或者字体大小呢?
我们还需要设置html标签,字体的大小,我习惯于使用设计图的宽/20来获取元素的rem数值。比如
那么我会设置html的font-size为 deviceWidht / (UI设计图宽/20);
var base = 720 / 20; // 720为UI设计稿的宽
var fontSize = deviceWidth / base;
document.documentElement.style.fontSize = fontSize + 'px';
<script type="text/javascript">
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'user-scalable=no,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale);
window.onresize = function (base) {
var deviceWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
var screenWidth = window.screen.width;
if (deviceWidth / screenWidth != window.devicePixelRatio) {
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
deviceWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
}
var fontSize = deviceWidth / base;
document.documentElement.style.fontSize = fontSize + 'px';
};
window.onresize(720);
</script>
以上代码我放在<head>里面,在html标签渲染前就开始设置。
一开始就根据DPR设置initial-scale,之后在onresize里面设置html字体大小。
大家会注意到onresize里面有这样一段代码:
var deviceWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
var screenWidth = window.screen.width;
if (deviceWidth / screenWidth != window.devicePixelRatio) {
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
deviceWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth;
}
这一段代码是为了兼容一部分旧款机器,这些机器无法正常的获取到DPR值,那么我们就只能设置屏幕页面内容宽度为设备宽度。
rem可以理解为一个长度单位,单位rem的值等于网页font-size的值。如果网页的字体大小为默认值16px,那么1rem就等于16px,0.5rem等于8px。根据这个原理,如果网页默认的字体大小改变,那么单位rem的大小也会改变
如果你看了很多篇文章,对 flexible 的解决方案一直还有一种不太了解的朦胧感觉,那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案,以及这套解决方案是如何作用的。
1:css3的media query来实现适配,例如下面这样;2.通过js动态设置html字体,例如下面这样:默认设计图为640的情况下1rem=100px;根据自己需求修改
规则就是,调用函数,放两个参数,第一个参数,是设计稿的宽度,第二个参数是px与rem的转换比例,通常会写100(因为好算);当然了,要把这段js代码最好封装在一个单独的js文件里,并且放在所有的css文件引入之前加载
最近在学习小程序,要把html的代码转换成小程序界面,其中就遇到了rem的转换问题,但小程序不太兼容rem,不是不能用rem,而是没办法设置根元素的font-size,因为rem是相对于根元素的font-size
根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小,适应不同的屏幕比例。本文的px转rem换算公式为:100px = 1rem
针对近日华为,小米的部分机型,在升级系统或升级微信之后,微信内置浏览器产生的rem不能正确填充满的问题,有如下解决方案,目前来看,产生这个情况的原因是因为给html附font-size时
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。rem 和 em 一样,也是一个相对大小的值,它是相对于根元素 <html>。
今天我们深度了解一下 rem 单位,这个单位目前已经得到了优秀浏览器的支持,并且有一些兼容方案来帮助你在低版本的 IE 浏览器中的使用它。
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。 rem这是个低调的css单位,近一两年开始崭露头角
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!