响应式开发移动端入门必备知识

Posted 2022-03-13 leophen

一、移动端布局计算

• Flex：

　　　采用Flex布局的元素，它的所有子元素自动成为容器成员，可以自动分配空间，适合做移动端开发

• rem：

　　　在不同的设备上显示不同的效果，因此适合做移动端开发

 

二、移动设备常见属性

• physical pixel：

　　　物理像素值（屏幕分辨率）

• device-independent pixel：

　　　设备独立像素（当前浏览器的宽高）

• device pixel ratio：

　　　设备像素比（设备像素比 = 物理像素 / 设备独立像素）

• PPI：

　　　每英寸的像素值

 

三、Viewport

（指设备的屏幕上能用来显示网页的区域）

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

/*参数说明
　　width : 设置layout viewport 宽度，值为一个正整数，或字符串"width-device"
　　height：设置layout viewport 高度，这个属性很少使用
　　initial-scale ：设置页面初始缩放值，值为一个数字，可以是小数
　　minimum-scale : 设置页面最小缩放值，值为一个数字，可以是小数
　　maximum-scale : 设置页面最大缩放值，值为一个数字，可以是小数
　　user-scalable : 是否允许用户进行缩放，值为"no"或"yes"
*/

 

四、度量单位

• em：

　　　相对长度单位，相对于当前对象内文本的字体尺寸，根据父元素的大小变化而变化

• rem：

　　　相对长度单位（r指root），相对于根元素（即 html 元素）font-size 的倍数，不会被它的父元素影响

• vw：

　　　相当于视窗高度的 %，单位为vw

• vh：

　　　相当于视窗宽度的 %，单位为vh