1.PC端和移动端的区别:
PC端:屏幕大 用网页固定版心,要考虑浏览器兼容问题,(布局:浮动＋定位＋标准流)
移动端:
-
手机屏幕小，网页宽度多数为100%，是适配手机屏幕宽度
-
移动端则基本不需要考虑兼容性问题，放心大胆使用CSS新特性(布局:使用flex布局或者百分比布局)
2.分辨率
在PC端 1物理分辨率=1逻辑分辨率
在移动端 1物理分辨率=2逻辑分辨率 or 1:3 or1:1
3.视口
视口就是浏览器显示哦页面内容的屏幕区域
分类:01.布局视口 。 iOS, Android基本都将这个视口分辨率设置为980p x。
02.视觉视口。用户正在看到的网站的区域。
03.理想视口.设备屏幕有多宽,浏览器显示页面就有多宽
4.视口标签
有了视口标签可以达到我们想要的理想标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-
width=device-width：视口宽度=设备宽度
-
initial-scale=1.0：初始页面缩放倍数
-
maximum-scale=1.0 最大缩放倍数
-
user-scalable=0 不允许用户缩放页面（移动端） 或者为 no 如果为 yes 则允许用户缩放
5.二倍图
设计师给我们的图片一般是二倍图,我们前端工程师拿到设计稿利用像素大厨选择 2X， 进行缩小一半，按照提示的单位开发即可。
6.flex布局
flex布局极大的提高了我们布局的效率，更简单、灵活。
注: display:flex; 一定要给亲父元素加
主轴对齐方式:
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值, 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-around | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
space-evenly | 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 |
其中经常使用的是:
justify-content: space-between;-
两侧没缝隙是 between
-
缝隙一样大是 evenly
-
2倍缝隙是 around
侧轴对齐方式:
| 属性值 | 作用 |
|---|---|
| flex-start | 起点开始依次排列 |
| flex-end | 终点开始依次排列 |
center | 沿侧轴居中排列 |
| stretch | 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器 |
其中经常使用的是:可以让元素垂直居中
align-items: center;小案例:通过flex让一个子盒子水平和垂直居中。
.father {width: 500px;height: 500px;background-color: pink;/* 设置为flex布局 */display: flex;/* 主轴水平居中 */justify-content: center;/* 侧轴垂直居中 */align-items: center;
}.son {width: 200px;height: 200px;background-color: purple;
}
7.伸缩比
把父盒子分为若干份数，每个子盒子各占几份。
flex:1; 一定给子盒子加
分配父级剩余的空间
语法:flex:1;
比如有一个父盒子里面有三个子盒子，每个子盒子写 flex：1； 此时每个子盒子各占三分之一。
.father {display: flex;height: 300px;background-color: pink;
}.father div {/* 每个孩子各占1份 */flex: 1;/* 默认子盒子和父亲一样高 */background: purple;
}html:
<div class="father"><div>1</div><div>2</div><div>3</div>
</div>显示效果:
一定要给子盒子添加。子盒子默认高度会和父盒子一样高。（前提是不给高度）
8.圣杯布局
所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。
一般这种布局方式适用于各种移动端顶部搜索部分，这是最常见的，如京东手机版主页面顶部搜索
-
两侧盒子写固定大小
-
中间盒子 flex: 1; 占满剩余空间
.top {display: flex;justify-content: c;
}.top div:first-child {width: 50px;height: 50px;background-color: red;
}.top div:last-child {width: 50px;height: 50px;background-color: red;
}.top div:nth-child(2) {flex: 1;height: 50px;background-color: pink;
}注:中间flex: 1; 和 width 有冲突。 优先执行 flex：1；
总结:
-
在flex眼中，标签不再分类。
-
简单说就是没有块级元素，行内元素和行内块元素
-
任何一个元素都可以直接给宽度和高度一行显示
-
-
Flex不存在脱标的情况：也就是基本淘汰了浮动，更不用清除浮动
-
当然存在兼容性问题，如果不考虑兼容性可以大量使用，如果是移动端则不用考虑直接flex
Can I use... Support tables for HTML5, CSS3, etc 可以查看兼容性
