移动端
- 手机屏幕小,网页宽度多数为100%,是适配手机屏幕宽度
- 移动端则基本不需要考虑兼容性问题,放心大胆使用CSS新特性
物理分辨率和逻辑分辨率
1. 物理分辨率:硬件所支持的,屏幕出厂就设定无法修改
2. 逻辑分辨率:软件可以达到的, 我们开发中写的是逻辑分辨率
视口
就是浏览器显示页面内容的屏幕区域。
视口的分类
布局视口:iOS, Android基本都将这个视口分辨率设置为980px。
视觉视口:用户正在看到的网站的区域。
理想视口: 设备有多宽,我的网页就显示有多宽
二倍图
其实实际开发中还有三倍图甚至四倍图等,多倍图,但是现在市场还是二倍图偏多,我们称为二倍图。
简单理解,二倍图存在就是为了让页面中图片更加清晰,遵循即可。
flex布局
伸缩比
圣杯布局
所谓的圣杯布局就是左右两边大小固定不变,中间宽度自适应。