标签：flex 主轴 分辨率 元素 html 笔记 宽度 722 720
一、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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。