CSS3: 移动端布局

最新推荐文章于 2025-05-28 15:10:25 发布

原创最新推荐文章于 2025-05-28 15:10:25 发布 · 171 阅读

CC 4.0 BY-SA版权

本文深入探讨了响应式布局的各种方法，包括绝对像素、百分比布局、flex布局、rem和vw/vh单位的优缺点。详细讲解了如何通过修改viewport和使用js控制html的font-size实现跨屏适配，以及在不同设备像素比下保持1px线条的解决方案。

绝对像素: 在小屏幕正常或显大，在大屏幕显小。

百分比布局:

优点: 单层div可以实现等比布局

缺点: div嵌套过多会计算繁琐

flex布局:

优点: 可以使用flex容器布局

缺点: 只适合局部布局

单位rem em:

1rem = html的font-size, 默认16px

1em = 父级的font-size

优点: 采用rem, 改html的font-size就可以在各种屏幕上等比缩放

缺点: 要使用js控制html的font-size

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

单位vw vh:

优点: 把屏幕分成100份，1vm=1%的屏幕，不需要js的参与。

viewport:

物理像素：物理像素又被称为设备像素，他是显示设备中一个最小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。

逻辑像素：一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。

设备像素比(dpr) = 物理像素/逻辑像素

Viewport视窗:

viewport是严格等于浏览器的窗口。在桌面浏览器中，viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。

viewport就是浏览器上，用来显示网页的那一部分的区域。Ios及新版本浏览器默认viewport为980px。

viewport默认有6个属性：

width //设置viewport宽度，可以为一个整数，或字符串"device-width"

initial-scale //页面初始的缩放值，为数字，可以是小数

minimum-scale //允许用户的最小缩放值，为数字，可以是小数

maximum-scale //允许用户的最大缩放值，为数字，可以是小数

height //设置viewport的高度（我们一般而言并不能用到）

user-scalable //允许用户进行缩放，'no'为不允许，'yes’为允许

根据dpr的值来修改viewport实现1px的线？

解决方案：

1、动态生成mate标签

        <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

2、css3 transform:scale缩放

        @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-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx){ 
 div{
 ……
 transform: scale(0.5, 0.5);
 }
}