【Web前端学习之路】web进阶（移动web） 黑马课程笔记02

1、移动端特点

• PC端屏幕大，网页有版心模块；移动端屏幕小，网页宽度多为100%
• 使用谷歌模拟器，在电脑中边写代码边调试移动端网页效果

右键单击检查后，切换至移动端模拟器： 

视口的作用：

使网页宽度与逻辑分辨率（在软件支持下可改变）相同，方法：使用meta标签设置视口宽度，制作适配不同设备宽度的网页

（注意：设计师会使用二倍图进行设计，目的是使图片分辨率更高，不至于模糊失真，但写代码是基于逻辑分辨率，故应当在Pxcook中选择开发模式中的2x设计图进行测量）

百分比布局（流式布局）：宽度自适应（width:100%），高度固定

2、Flex布局

• Flex布局（弹性布局）：是一种浏览器提倡的布局模型，非常适合结构化布局；使布局页面更简单、灵活；同时也避免浮动脱标的问题。

       设置方式：给父级元素添加display:flex；子元素可以自动的挤压或拉伸，按主轴方向布局

• Flex布局模型构成：

       弹性容器（父级元素）                      

       弹性盒子（子级元素）

       主轴（沿水平方向）

       侧轴/交叉轴（沿垂直方向）

       

 

给父级元素添加display:flex；默认弹性盒子在弹性容器内按主轴方向排列

 

• justify-content:调节元素在主轴的对齐方式

•  align-items(添加至弹性容器)：调节元素在侧轴的对齐方式
•  align-self(添加至弹性盒子)

 

 注：若弹性盒子不定宽高，则高会默认拉伸至其父级一样高度（除非另外设置了align-self对齐方式）；宽默认内容撑开

•  伸缩比：使用flex属性修改弹性盒子的伸缩比；

         flex:数值（整数）：意味着该弹性盒子占用父盒子剩余尺寸的几份

• flex-direction：改变主轴方向，即改变元素排列方向

       因为子级元素是一定按主轴方向排列，故改变主轴方向即可竖直排列。

 （注：若主轴方向变为竖直，则侧轴方向自动变为水平；则此时想要视觉效果上的垂直居中则需要写属性为justify-content：center）

• flex-wrap:使弹性盒子换行排列

       该属性默认值是nowrap，则当子级元素总宽度大于父级元素时，会自动压缩子级元素的宽度，并不会像浮动一样若大盒子放不下则自动换行，要想达到此效果，将属性值改为wrap即可。

 

 

•  align-content：调整行对齐方式，即调整上图行间距，取值与justify-content基本相同