移动端特点
PC端/移动端不同?
PC端
- 屏幕大,网页固定版心
- 端浏览器繁多,更多考虑兼容性问题。(布局: 浮动+定位+标准流)
移动端
- 手机屏幕小,网页宽度多数为100%,是适配手机屏幕宽度
- 移动端则基本不需要考虑兼容性问题,放心大胆使用CSS新特性
物理分辨率和逻辑分辨率
- 物理分辨率:硬件所支持的,屏幕出厂就设定无法修改
- 逻辑分辨率:软件可以达到的, 我们开发中写的是逻辑分辨率
视口
视口(viewport)就是浏览器显示页面内容的屏幕区域。
视口的分类:
- 布局视口 。 iOS, Android基本都将这个视口分辨率设置为980px。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7xVCA56s-1658316761144)(assets/1638005128444.png)]
- 视觉视口。用户正在看到的网站的区域。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NstG1llg-1658316761145)(assets/1638005166746.png)]
- 理想视口。 设备有多宽,我的网页就显示有多宽
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eE0qm3g2-1658316761146)(assets/1638005205656.png)]
视口标签
有了视口标签,可以达到我们想要的理想视口。
<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 则允许用户缩放
二倍图
其实实际开发中还有三倍图甚至四倍图等,多倍图,但是现在市场还是二倍图偏多,我们称为二倍图。
简单理解,二倍图存在就是为了让页面中图片更加清晰,遵循即可。
- 网页美工的设计稿基本是 750px
- 我们前端工程师拿到设计稿利用像素大厨选择 2X, 进行缩小一半,按照提示的单位开发即可。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wCeupvJF-1658316761146)(assets/1638005493860.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H4NJQif5-1658316761146)(assets/1638005512404.png)]
flex布局
flex布局极大的提高了我们布局的效率,更简单、灵活。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZPY3Xgk8-1658316761147)(assets/1638005616290.png)]
display: flex; 一定要给亲爸爸加。
主轴对齐方式
属性值 | 作用 |
---|---|
flex-start | 默认值, 起点开始依次排列 |
flex-end | 终点开始依次排列 |
center |
沿主轴居中排列 |
space-around |
弹 |