【CSS学习第十篇】

CSS学习第十篇1. 移动Web开发流式布局导读2. 移动端基础3. 视口3.1 视口介绍3.2 meta视口标签4. 二倍图4.1 物理像素与物理像素比4.2 二倍图介绍4.3 背景缩放background-size4.4 背景二倍图以及多倍图切图5. 移动端开发选择6. 移动端技术解决方案7. 移动端特殊样式8. 移动端技术选型9. 移动端常见布局—流式布局1. 移动Web开发流式布局导读目标目录2. 移动端基础浏览器现状只处理-webkit-前缀就够兼容全部主流手机浏览器。手机屏幕现状常见移动端屏幕尺寸移动端调试方法总结3. 视口3.1 视口介绍我们要学理想视口1布局视口即网页本身的宽度必须手动放大效果图2视觉视口手机多大视觉视口就有多大放大/缩小网页视觉视口变小/变大。例如放大网页屏幕大小不变但是内容少了这就是视觉视口变小了。效果图3理想视口总结3.2 meta视口标签视口标签标准的viewport设置4. 二倍图4.1 物理像素与物理像素比物理像素和物理像素比4.2 二倍图介绍视网膜屏幕但是压缩像素手机可能会使图片模糊解决方案如下准备二倍图效果图除了二倍图还有多倍图4.3 背景缩放background-size背景缩放background-size1原图效果2长度只写一个参数3百分比4cover5contain与cover的区别是contain只覆盖一个维度4.4 背景二倍图以及多倍图切图切图缩放后才会显示完整图片清晰但是准备图的时候有时候需要2倍图有时候需要3倍图那我如何去切图呢 →用cutterman5. 移动端开发选择移动端主流方案单独的有早年淘宝、传统企业官网响应式的有知乎官网、菜鸟教程等教程网站接下来我们来看各自的不同之处。1单独移动端页面根据设备的不同来显示不同的页面。2响应式兼容PC移动端通过判断屏幕宽度来改变样式以适应不同终端6. 移动端技术解决方案webkit内核考虑兼容性移动端样式初始化CSS3有了新的盒子模型实操7. 移动端特殊样式特殊样式8. 移动端技术选型选方案9. 移动端常见布局—流式布局流式布局要使盒子在合理的范围之内还会设置最大值和最小值实操