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基本相同