目录
移动端
PC端与移动端的区别：PC端屏幕大，页面大多固定版心；手机端屏幕小，网页宽度大多为100%
屏幕尺寸：指的是屏幕对角线的长度，一般用英尺来度量
分辨率：物理分辨率物理分辨率是生产屏幕时就固定的，不可被改变；逻辑分辨率是由软件（驱动）决定的；制作网页参考逻辑分辨率
以IPhone6/7/8为例，物理分辨率为750*1334，逻辑分辨率为375*667，比例为2:1
视口：显示HTML网页的区域，用来约束HTML的尺寸，使用meta标签设置视口，制作适配不同设备宽度的网页
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport：视口；width=device-width：视口宽度=设备宽度；initial-scale=1.0：缩放1倍(不缩放)
布局
百分比布局
百分比布局也称流式布局，效果为宽度自适应，高度固定
Flex布局
Flex布局又称弹性布局，是一种浏览器提倡的布局模型，布局网页更简单灵活，避免浮动脱标的问题，Flex布局非常适合结构化布局，
设置方式：给父元素添加displa：flex，子元素可以自动挤压或拉抻
Flex组成部分为弹性容器、弹性盒子、主轴、侧轴/交叉轴
网页中盒子有间距，在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距
使用justify-content调节元素在主轴的对齐方式
| 属性值 | 作用 |
| flex-start | 默认值，起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴开始居中排列 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间 |
| space-eventy | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
使用align-items调节元素在侧轴的对齐方式
| 属性值 | 作用 |
| flex-start | 默认值，起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿侧轴/交叉轴居中排列 |
| stretch | 默认值，弹性盒子沿着侧轴/交叉轴被拉伸至铺满容器 |
align-self控制某个弹性盒子在侧轴的对齐方式，添加到弹性盒子/子级
在flex布局模型中，弹性盒子主轴默认水平方向排列，侧轴默认垂直方向排列
修改主轴方向属性flex-direction，主轴改为垂直后，默认侧轴会改为水平
| 属性值 | 作用 |
| row | 默认值，行，水平 |
| column | 列，垂直 |
| row-reverse | 行，从右往左 |
| column-reverse | 列，从下往上 |
弹性盒子换行显示（常用）flex-wrap：wrap；
移动适配
rem
rem单位是相对单位，是相对于HTML标签的字号计算结果，1rem=1HTML字号大小
目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的十分之一
rem单位尺寸计算：rem单位尺寸=元素宽/高数值 / 基准根字号(十分之一视口宽度)
flexible.js是手淘开发出的一个用来适配移动端的js框架，原理是根据不同的视口宽度给网页中HTML根节点设置不同的font-size
flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放的效果
flexible.js一般引入时放在最后一行</body>前
<body>
<script src=”目标路径/flexible.js”></script >
</body>
vw/vh
vw/vh相对单位，1vw(viewport width)=一百分之一视口宽度；vh(viewport height)=一百分之一视口高度
响应式网页
响应式网页：一套代码能够兼容不同的屏幕设备
媒体查询常用写法：
@media (媒体特性){
选择器{
设置HTML字号
}
}
媒体特性常用写法max-width和min-width
完整写法@media 关键词 媒体类型 and/only/not (媒体特性)
关键词：and/only/not
媒体类型：媒体是用来区分设备类型的，如屏幕设备、打印设备等
媒体特性：主要用来描述媒体类型的具体特性，如当前屏幕的宽高、分辨率、横屏或竖屏等
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
