720&722笔记
作者：互联网
一、PC端和移动端有什么区别
- pc一般有固定宽度的版心，居中显示
- 移动端屏幕小，网页多数为100%
二、屏幕尺寸
屏幕尺寸指的是对角线的长度，一般用英寸度量
三、分辨率
常用PC分辨率：1920*1080、1366**768......
如何计算缩放：（1920/150%)*（1080/150%）
物理分辨率和逻辑分辨率：
物理分辨率---出厂设置，生产屏幕时就固定不可改变 逻辑分辨率---由软件驱动决定
做网页参考的是逻辑分辨率（google检查调试显示的手机型号也是按照逻辑分辨率的）
移动端页面制作主要以iphone6/7/8为参考，逻辑分辨率宽度375，按照二倍图（即实际物理分辨率）750产出设计图
四、二倍图
使用二倍图为避免高分辨率下出现图片模糊失真的问题
- 市场上设计稿参考iphone6/7/8，设备逻辑分辨率375产出设计稿，二倍图设计稿的尺寸750px
五、视口（移动端必须设置视口）
通过使用meta标签（meta元素信息）设置视口宽度，制作适配不同设备宽度的网页（手机屏幕尺寸不一样；网页宽度为100%，网页的宽度和逻辑分辨率尺寸相等）
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
✳不设置meta，默认情况下，网页宽度和逻辑分辨率不相等
六、百分比布局（流式布局）
效果：宽度自适应（对宽度都用百分比），高度固定
七、flex布局/弹性盒布局（不会脱标）
通过给父元素加display：flex——改变子元素在父元素中的布局方式，子元素可以自动地挤压或拉伸（盒子不会变形）
弹性盒布局（父元素就是弹性盒）
- 浏览器提倡的布局模型
- 布局方式更简单更灵活
- 避免了浮动脱标问题（所以比浮动更好用）
- 非常适合结构化的布局
给父盒子设置flex以后，可以控制子元素span在弹性盒子里的布局方式，就可以设置span元素的宽高
组成部分：
- 弹性容器，任何一个容器都可以被指定为flex布局
- 主轴/x轴（主轴和侧轴可以交换xy方向）
- 侧轴/y轴
在flex的布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的距离
1、加给父元素的属性
调节在主轴上的对齐方式： justify-content
1 flex-start （默认值）：起点开始依次排列
2 flex-end ：终点开始依次排列
3 center ：沿主轴居中排列
4 space-around ：沿主轴均匀排列，空白间隔分布在弹性盒子两侧
5 space-between ：沿主轴均匀排列，空白间隔分布在相邻盒子之间
6 space-evenly ：沿主轴均匀排列，弹性盒子和容器之间的间距都是相等的
调节在侧轴（y）上的对齐方式：align-items（需要给父盒子加高度才能生效）
1 flex-start（默认值）：起点开始，依次排列
2 flex-end：终点开始，依次排列
3 center：延侧轴居中排列
4 stretch（弹性盒子延侧轴拉伸至铺满容器）：没给子元素设置高度才能拉伸，设置固定高度以后就不会拉伸了
改变主轴的方向：flex-direction
1 flex-direction:column 主轴是y轴（注意如果调换xy轴，宽高也会换过来）
2 flex-direction:row 主轴是x轴（默认）
3 flex-direction:column-reverse 主轴是y轴的反轴
4 flex-direction:row-reverse 主轴是x轴的反轴
是否换行：flex-wrap
1 nowrap ：不换行（默认）
2 wrap ：换行
3 wrap-reverse ：反向换行（翻转了）
2、给子元素加的属性
flex：数字——修改弹性盒子的伸缩比例
剩余空间除以数字之和，然后再按各自的数字分配空间（数字取整没有小数）
八、移动适配
rem
1.长度单位，是一个相对单位（相对于html标签的字号来计算结果）
1rem=1 html字号大小
2.最终实现效果：屏幕宽度不同，网页元素的尺寸不同（等比缩放）
媒体查询（缺点：设备类型多，都适配难）
手机屏幕大小不同，分辨率不同，如何设置不同的html标签字号——通过媒体查询
媒体查询能够检测视口的宽度，编写差异化的css样式（当某个条件成立时，执行对应的css样式）
语法：
@media 媒体类型 and|not|only(媒体的特性){
css代码
}
//解读
有哪些媒体类型
- all 用于所有设备
- print 用于打印机和打印预览
- screen 电脑屏幕 平板电脑 智能手机
and|not|only
- and 和
- not 不是
- only 只有
媒体的特性：判断依据
//演示
@media screen and (min-width: 320px) {
html {
/*根字号*/
font-size: 32px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 37.5px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 41.4px;
}
}
min-width：需要数值小的在前
设备宽度不同，html标签字号设置多少合适——将网页等分成10份，html标签的字号为视口宽度的1/10
3.如何确定rem的数值
-
根据视口宽度，设置不同的html标签字号
- 查看设计稿宽度——确定参考设备宽度（视口宽度）
- 确定根字号（1/10视口宽度）
-
书写代码，尺寸是rem单位
-
量取设计稿里元素的宽度px
-
根据px计算rem单位的尺寸
rem单位的尺寸=px单位的值/2（二倍图）/根字号
标签：flex,主轴,分辨率,元素,html,笔记,宽度,722,720 来源： https://www.cnblogs.com/mengxiaoye/p/16510605.html