前端提高篇（四十六）CSS进阶11：移动端布局(等比缩放+1px问题：viewport+rem | transform

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

西门费雪

1594

文章

923196

访问

+关注

分类

暂无分类

日期归档

2023-05(4)

2023-06(2)

前端提高篇（四十六）CSS进阶11：移动端布局(等比缩放+1px问题：viewport+rem | transform | vw+插件)

发布于2021-03-13 18:57 阅读(1377) 评论(0) 点赞(4) 收藏(3)

等比缩放：

背景：当屏幕大小不同时，元素动态缩放，凸显大屏更清晰的优势
1.百分比：层级多时，需要计算
2.flex：需要计算
3.单位rem：固定地将html的font-size设置成屏幕宽度的某一个百分比值，当需要定义宽高时，以rem为单位去设置
4.单位vw，vh：把屏幕宽高分成100份，1份就是1vw（宽）或1vh（高），如20vw代表占屏幕宽度的20%；不用设置html的font-size，用起来更方便。
同样是用巧妙的方式使用屏幕的百分比，但避开了直接使用百分比的动态复杂计算（逐渐推荐使用）

rem VS em：
rem和em都是单位，html的font-size设置多大，1rem就是多大；而父级的font-size多大，1em就是多大

html {
	font-size : 30px;
}
.wrapper {
	font-size:60px;
}

<div class="wrapper">
    <div class="container">123</div>
</div>

此时1rem=30px；.container的font-size是60px

rem与等比缩放：
假设html的font-size是屏幕宽度的10%，某div的宽度设置2rem
当屏幕是600px宽时，font-size为60，该div宽占比260/600=1/5；
当屏幕是400px宽时，font-size是40，该div宽占比240/400=1/5；
相当于换了个固定宽度算百分比

用js动态地设置font-size的值：

window.onload = function() {
    var w = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = w / 10 + 'px';
}

<style>
    body {
        margin: 0;
    }
    div {
        font-size: 1rem;
        height: 2rem;
        width: 2rem;
        color: #fff;
        background-color: pink;
    }
</style>

<body>
    <div>ppp</div>
</body>

效果：
当屏幕是ipone5/SE时，屏幕宽度320px，此时div的大小是64*64
在这里插入图片描述
当屏幕是Galaxy Fold时，屏幕宽度280px，此时div大小是56 * 56
（当改变手机型号时，要刷新一下，要不然数据是上一个手机的）

viewport视窗

1.物理像素：物理像素又被称为设备像素，它是显示设备中一个最小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度
2.逻辑像素：一个可以由程序使用的虚拟像素（如CSS像素），然后由相关系统转换位物理像素
3.设备像素比（dpr）=物理像素/逻辑像素

一个物理像素≠一个逻辑像素，不同系统对应的逻辑像素不同

随着科技不断发展，屏幕的像素越来越高，原本一个逻辑像素对应一个物理像素，现在可能一个逻辑像素对应2-3个物理像素，可能375px的宽，物理像素达到了700个，考虑长*宽，可能需要4或9个物理像素为1px服务
在这里插入图片描述
安卓手机的dpr有多种，每种可能都不一样，兼容起来比较难

背景：1px问题：
当页面追求更精细的样式效果，即：对一个物理像素做样式的设置，如果用0.5px甚至更小的px，有些浏览器不能识别，直接抹零，样式就不能生效
这里拿苹果手机的屏幕做例子，它的dpr一般是2或者3
如果dpr=2，我设置border时只想设置1个物理像素，就想写0.5px，
在这里插入图片描述

但有的浏览器不识别0.5px，会直接抹掉，变成0px，就没有border了，这时候就需要用viewport视窗来实现这个效果了

viewport就是浏览器上，用来显示网页的那一部分的区域。
viewport严格等于浏览器的窗口，在桌面浏览器中，viewport就是浏览器窗口的宽度高度，但在移动端设备上，需要考虑逻辑像素与物理像素，精细样式如何体现等等
IOS及新版本浏览器默认viewport为980px

把html页面默认写好的viewport注释掉，再看移动端页面大小：
在这里插入图片描述
可以看到，并不是屏幕多大，页面就是多大的，可以看到，宽度是980px，是默认预设的宽度：

设置980px是因为一开始的页面都是展示在电脑上的，浏览器多大，页面就怎么显示，但是放在手机显示，可能会因为屏幕大小差距大，页面被缩小到用户无法看清内容，需要手动放大，后来设置手机页面默认宽度980px，手机屏幕放不下就用横向滚动条，滚动着看

viewport默认有6个属性：
1.width：设置viewport宽度，可以为一个整数，或字符串"device-width"设备宽度
2.initial-scale：页面初始的缩放值，为数字，可以是小数，写小数num，就相当于放大1/num，可以将逻辑像素拓展到与物理像素是1：1状态，就可以不用写小于1的px(如0.5px)来表示一个物理像素了
3.minimun-scale：允许用户的最小缩放值，为数字，可以是小数
4.maximun-scale：允许用户的最大所防止，为数字，可以是小数
5.height：设置viewport的高度（一般用不到）
6.user-scalable：是否允许用户进行缩放，'no’为不允许，‘yes’为允许；现在是用响应式布局，默认会根据页面大小缩放元素，用户不需要自己缩放，此项写’no’，且将initial-scale、minimun-scale、maximun-scale三个设置成一样的

解决办法
比如在ipone6/7/8上设置initial-scale为0.5，屏幕宽度从375变成了750，ipone6/7/8的dpr=2，此时再在html等文件里写1px，就是指的一个物理像素，就不用写0.5px了
在这里插入图片描述

iponeX的dpr=3，initial-scale就可以写成0.3333

为了兼容各设备的dpr，用js判断dpr，然后动态设置initial-scale

var oMeta = document.createElement('meta');
oMeta.setAttribute('name','viewport');
if (window.devicePixelRatio == 3) {
    oMeta.setAttribute('content', 'width=device-width, initial-scale=0.333,minimun-scale=0.333,maximun-scale=0.333,user-scalable=no');
}

if (window.devicePixelRatio == 2) {
    oMeta.setAttribute('content', 'width=device-width, initial-scale=0.5,minimun-scale=0.5,maximun-scale=0.5,user-scalable=no');
}
document.getElementsByTagName('head')[0].appendChild(oMeta);

在这里插入图片描述
window.devicePixelRatio的值可能不会是整数，可以在console里看看

等比缩放与1px问题结合
viewport和上面的rem可以结合起来使用，这样既解决1px的问题，又等比缩放

设置1rem=页面宽十分之一，div宽2rem，高100px；
ipone6/7/8的dpr=2，设置了viewport之后，body宽为750px，div宽为750/102 = 150，再加border，宽152px

iponeX的dpr=3，设置了viewport之后，body宽为1125px，div宽约为1125/102 = 225，再加border，宽227px
在这里插入图片描述
关于这个方法，手淘将这个功能扩展并封装成js文件
方案：手淘解决方案flexible
http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js
功能效果：
1.根据屏幕大小动态改变html的fontSize，解决等比缩放问题
2.给body设置fontSize，字体大小可以直接继承body的font-size
3.给html标签添加data-dpr属性，可以通过查找该属性，给不同dpr设备设置个性化属性，如：

[data-dpr='2'] div{
    font-size: 26px;
}

在这里插入图片描述
用css的解决办法：
另一种解决1px问题的办法，就是使用css3中的transform，先把宽高都写大一些，然后再用transform缩小（meta的initial-scale恢复默认的1.0）

当我设置宽高100px，border为1px时：

div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    color: #fff;
    background-color: pink;
}

在这里插入图片描述

当我用transform时：

div {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    color: #fff;
    background-color: pink;
    transform: scale(0.5, 0.5);
    transform-origin: 0 0;/* 中心点是左上角 */
}

在这里插入图片描述

可以看到，border是有差别的，第二个border的1px对应的就是1个物理像素（ipone 6/7/8的dpr是2）

解决办法3：
还有一种解决等比和1px的方法，用vw，
vw+postcss（插件）（推荐）
根据设计稿（如宽度750px的设计稿，以px为单位写大小），转换成vw，解决等比缩放问题
对于小于1px的线，以px为单位，不转成vw。
postcss-write-svg插件主要用来处理移动端1px的问题，主要使用border-image和background来做1px的相关处理，编译出来是border-image或者background

对于等比缩放功能：
比如，设计稿是750px的，里面有一个100px的btn，1vw = 7.5px，求?vw = 100px；这样就可以解决等比缩放的问题
有插件专门可以计算在设计稿宽度下，px与vw的换算
在这里插入图片描述
install后点击右下角的齿轮------设置------修改设计稿的宽度

默认750，如果是其他宽度，如1125px，就可以在这里改

效果：
在这里插入图片描述
也有插件可以解决rem与vw的换算，一般只使用rem或vw中的一种，两种插件一个使用，一个禁用（启用禁用后要重启vscode）

默认html的font-size是16px：
在首选项----设置（file----preference----setting）-----搜索插件名，可以看到和修改html的font-size：
在这里插入图片描述
效果：

最后：dpr不同的设备上图片的适配问题
在这里插入图片描述
分辨率大的图放在dpr小的设备上，会被降采样，图片不会模糊，但不那么锐利了，色彩不那么丰富，分辨率小的图放在dpr大的设备上，每一块像素会被分解成多块，图片会变模糊

解决办法：
用meta动态匹配，或用js动态匹配，当dpr小的情况，放分辨率较低的图；当dpr大的情况，放分辨率高的图
或者都使用高清图即可

用meta：

@media
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min--moz-device-pixel-ratio:2),
only screen and (-o-min-device-pixel-ratio:2/1),
only screen and (min-resolution:192pdi),
only screen and (min-resolution:2dppx){/*判断dpr*/
    div{
        img:...
    }
}

用js：

window.onload = function() {
    if (window.devicePixelRatio > 1){
        var images = Array.prototype.slice.call(document.getElementsByTagName('img'));
        images.forEach(function (ele, index) {
            var lowers = images[index].getAttribute('src');/*logo.png*/
            var highers = lowers.replace('.','@2x.');/*logo@2x.png*/
            images[index].setAttribute('src',highers);
        });
    }
}