移动端适配方案与css单位介绍

小白目

已于 2022-08-16 14:53:34 修改

阅读量1.6k

点赞数 3

分类专栏： css 文章标签： css css3 html

于 2022-05-21 17:22:51 首次发布

本文链接：https://blog.csdn.net/qq_37974755/article/details/124900675

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、Css常用单位px,rem,em,vw,vh,%

1. px

px就是pixel像素的缩写，相对长度单位(表示相对大小，不同分辨率下相同的px元素显示会不一样)。像素px是固定像素相对于显示器屏幕分辨率而言，一旦设置了就无法因为适应页面视口大小是分辨率的尺寸单位。

设备物理像素比(devicePixelRatio)，即

是指在理想布局宽度，使用多少个物理像素来渲染一个css像素。浏览器会根据设备像素比, 来展示图像;所以, 在 CSS 中 1px 可不一定对应真实在显示器上的 1px!

物理像素：是指设备屏幕实际拥有的像素点也叫分辨率（设备独立像素），设备出厂后就不能改变的参数。

css像素：也叫做逻辑像素，是相对单位

缩放比例就是 css 像素边长 / 设备独立像素边长；
在缩放比例为 100% 的情况下，1 个 css 像素大小等于 1 个设备独立像素；
在缩放比例为 200% 的情况下，1 个 css 像素大小等于 (2 * 2) 个设备独立像素；

比如：在 CSS 中使用的 px 都是指 css 像素，比如 width: 128px。css 像素的大小是很容易变化的，当我们缩放页面的时候，元素的 css 像素数量不会改变，改变的只是每个 css 像素的大小。也就是说 width: 128px 的元素在缩放200% 以后，宽度依然是 128 个 css 像素，只不过每个 css 像素的宽度和高度变为原来的两倍。如果原本元素宽度为 128 个设备独立像素，那么缩放 200% 以后元素宽度为 256 个设备独立像素。

2.rem 、em

浏览器默认最小字体12px, (设置一个字体为8px不会起作用，会显示为最小的字体12px，解决办法：transform：scale(0.75)

默认字体大小16px,意思就是假设我不会html做任何设置,对其他的样式class设置2rem,那么显示出来的样式应该是32px(16px * 2)。使 1rem=10px得方法：设置HTML{font-size：62.5%；}

总结：

em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
em是相对于其父元素来设置字体大小，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素，需要在根元素确定一个参考值。

3. vw、vh

vw和vh是相对长度单位，是相对视口屏幕的的宽度和高度。将页面分为100份，1vw = device-width/100，100VW等于屏幕的宽度，vh类似。

假设视觉稿宽度为 750px（100%），视觉稿中某个字体大小为 75px（占10%），则我们的 css 属性写成：font-size: 10vw

再假设我的设计图是375px，某个盒子宽是24px,那么 24/375表示是该盒子占屏幕的宽度比例,这时候你又知道屏幕总宽度为100vw, 那么动态的宽度为 24/375*100vw。

4. 百分比%

一般来说就是相对于父元素，如果父元素没有指定高度，设置百分比则没有效果

4.1 对于普通定位元素就是我们理解的父元素

4.2 对于position: absolute;的元素是相对于已定位的父元素

4.3 对于position: fixed;的元素是相对于ViewPort（可视窗口）

二、视口viewport

用于显示网页部分的区域，在PC端视口即是浏览器窗口区域，在移动端，为了让页面展示更多的内容，视窗的宽度默认不为设备的宽度，在移动端视窗有三个概念：布局视口（Layout Viewport）、视觉视口（Visual ViewPort）和理想视口（Ideal ViewPort）

通过meta设置视口大小：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

三、适配方案

1. rem布局

根据 设备屏幕宽度 设置html标签根元素字体大小font-size（如果设置 html 的 font-size 为 16px，则如果需要设置元素字体大小为 16px，则css写为 1rem），可以成比例的调整以rem为单位的属性，达到自适应的效果（在不同尺寸的屏幕横向填满屏幕，且在不同屏幕元素大小比例一致。）有px转rem插件可用！

2. 百分比布局

如果做toc的项目设计很多尺寸设置，百分比计算对开发者来说并不友好，且元素百分比参考的对象是父元素，元素嵌套较深会有问题。

3. viewport 适配

拿到设计稿后采用 vw 方案的话，从底层根本上解决了不同尺寸屏幕的适配问题，因为每个屏幕的百分比是固定的、可预测、可控制的。在需要将对应的元素大小单位 px 转换为 vw 单位时可以利用一些类似 postcss-px-to-viewport 的插件，来将 px 自动转换为 vw，从而解决难以计算的问题，并且兼容性高。