移动端布局
准备工作:
设置Meta标签
width = device-width:布局视口的宽度等于当前设备视口的宽度
initial-scale:初始的缩放比例(默认设置为1.0)
minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)
maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)
user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
1.rem/em的区别:
em:宽高大小根据字体大小有关系优先执行自身元素的大小/字体大小乘与em元素/就是em宽高的大小
rem:会以网页里的根元素的字体大小而设计大小
ppi:像素密度 苹果
dpi:图像每英寸长度内的像素点数 安卓
dpr:(设备像素比)=物理像素(设备显示)/逻辑像素(css设置的)
vw详解
100vw不一定等于百分百
100vw=视口宽度百分百
vh详解
100vh=视口高度百分百
<link rel=" shortcut .icon" .href= ”路径">
插入标题标签