移动WEB开发_流式布局
00-流式布局介绍
- 百分比布局,也称非固定像素布局
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
- 配合
max-width
和min-width:320px
使用
01-移动端基础
- 移动端设备屏幕尺寸非常多,碎片化严重、
- 移动端调试方法
- Chrome DevTools(谷歌浏览器)的模拟手机调试
- 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
- 使用外网服务器,直接IP或域名访问
02-视口viewport
视口(viewport)指浏览器显示页面内容的屏幕区域
- 布局视口 layout viewport
- 视觉视口 visual viewport
- 理想视口 ideal viewport
03-meta视口标签
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
最标准的viewport设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
04-物理像素&物理像素比
- 物理像素:屏幕显示的最小颗粒,就是厂商设置好的分辨率
- 物理像素比:用几个物理像素点显示1px
- 开发时1px不一定等于1个物理像素
- lRetina(视网膜屏幕)是一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度
05-二倍图
- 问题描述:一张同样尺寸大小的图片,在PC端1px是用一个物理像素点来显示,而在移动端1px可能是用4个或者更多的物理像素点来显示,所以在PC端中显示没问题,而放到物理像素比高的移动设备中就造成了图片模糊
- 解决方法:准备的图片比实际开发的尺寸大2倍或多倍的图片,手动把这个图片缩小至原定尺寸,这样在移动端显示时就不会模糊
- img标签:用width和height控制
- 背景图片:用background-size控制
06-背景图片缩放background-size
background-size:width height;
- 单位:长度|百分比|cover|contain
- %:当前自身属性
- cover:等比例缩放,完全覆盖父盒子区域,可能有部分区域显示不全
- contain:等比例缩放,当宽或高其中一个属性到达父盒子边缘停止缩放,可能会有部分空白
- 只指定了一个参数时,另一个参数等比例缩放
07-移动端开发选择
- 单独制作移动端页面(主流)
- 例如:京东官方(流式布局)
- 通常情况下,网址域名前面加 m(mobile)
- PC端和移动端为两套网站,专门针对移动端适配的一套网站
- 响应式页面兼容移动端(其次)
- 例如:三星官方
- PC和移动端共用一套网站,只不过在不同屏幕下,样式会自动适配
- 需要大量精力调试兼容性
08-移动端技术解决方案
-
移动端浏览器兼容问题
- 移动端浏览器基本以 webkit 内核为主,考虑webkit兼容性问题就行
- 私有前缀只考虑添加webkit即可
-
CSS初始化:normalize.css
- Normalize.css:保护了有价值的默认值
- Normalize.css:修复了浏览器的bug
- Normalize.css:是模块化的
- Normalize.css:拥有详细的文档
- 官网地址: http://necolas.github.io/normalize.css/
-
CSS3盒子模型:box-sizin
- 传统盒子模型:盒子的宽度 = width + border + padding
- CSS3盒子模型:盒子的宽度= CSS中设置的宽度width
- CSS3中的盒子模型, padding 和 border 不会撑大盒子
- PC端如果完全需要兼容,用传统模式,如果不考虑兼容性,选择 CSS3 盒子模型
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
09-移动端特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除设置为 transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
10-移动端技术选型
-
移动端单独制作(主流)
- 流式布局(百分比布局)
- flex 弹性布局(强烈推荐)
- less+rem+媒体查询布局
- 混合布局
-
响应式(其次)
- 媒体查询(原生)
- bootstarp(框架)