设置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= ”路径">
插入标题标签
Rem配合VW做等比缩放布局
1.rem
rem是指相对于根元素的字体大小的单位。
⒉根元素
如果根元素是相对设备尺寸自动变换。
3.vw
视窗宽度,1vw等于视窗宽度的1%。
4.VW转换成PX赋值给font-size
例:设备的分辨率为640*1136,逻辑像素为320*5681VW=3.2pxFont-size:100px;转换成VWfont-size:31.25vw;1rem=31.25vw可一起结合写等比例缩放布局。