移动三题-day13笔记三天.pdfVIP

视口

作用：显示HTML网页的区域，用来约束HTML的尺寸

!DOCTYPEhtml

htmllangen

head

metacharsetUTF-8

metahttp-equivX-UA-CompatiblecontentIE=edge

!–视口--

metanameviewportcontentwidth=device-width,initial-scale=1.0

titleDocument/title

/head

body

/body

/html

width=device-width：视口宽度=设备宽度

initial-scale=1.0：缩放1倍（不缩放）

二倍图

概念：设计稿里面每个元素的尺寸的倍数

作用：防止在高分辨率屏幕下模糊失真

使用方法：

适配方案

宽度适配：宽度自适应

百分比布局

Flex布局

等比适配：宽高等比缩放

rem

vw

02-rem

简介

rem单位，是相对单位

rem单位是相对于HTML的字号计算结果

1rem=1HTML字号大小

查询

查询能够检测视口的宽度，然后编写差异化的CSS样式

当某个条件成立,执行对应的CSS样式

@media(width:320px){

html{

background-color:green;

}

}

rem布局

目前rem布局方案中，将网页等分成10份，HTML的字号为视口宽度的1/10。

exible.js

exible.js是手淘开发出的一个用来适配移动端的js库。

原理就是根据不同的视