移动端布局
移动端基础
移动端浏览器现状
移动端起步较晚,基本以webkit为主,兼容移动端主流浏览器,处理Webkit内核即可,可以放心使用H5标签和CSS3样式
移动端屏幕现状
- 屏幕尺寸多样、分辨率多样,碎片化严重
- 作为开发者无需过多关注分辨率,因为我们使用的尺寸单位是
px
移动端调试方法
- Chrome DevTools的模拟移动端调试
- 搭建本地web服务其,手机和服务器在一个局域网内,通过手机访问服务器
- 使用外网服务器,直接IP或域名访问
视口
视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
布局视口 layout viewport
布局视口是指网页的宽度,一般移动端浏览器都默认设置了布局视口的宽度。,布局视口的默认宽度有可能是768px、980px或1024px等,这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置,是为了解决早期的PC端页面在手机上显示的问题。
视觉视口 visual viewport
视觉视口是指用户正在看到的网站的区域,这个区域的宽度等同于移动设备的浏览器窗口的宽度。当我们在手机中缩放网页的时候,操作的是视觉视口,而布局视口仍然保持原来的宽度
理想视口 ideal viewport
理想视口是指对设备来讲最理想的视口尺寸。在理想视口中,布局视口的大小和屏幕宽度是一致的,可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在开发中,为了实现理想视口,需要给移动端页面添加标签配置视口,通知浏览器来进行处理,使得布局视口的宽度与理想视口的宽度一致
meta视口标签
属性 | 说明 |
---|---|
width | viewport的宽度,可以设置为device-width特殊值 |
initial-scale | 初始缩放比,大于0的数字 |
maximum-scale | 最大缩放比,大于0的数字 |
minimum-scale | 最小缩放比,大于0的数字 |
user-scalable | 用户是否可缩放,yes or no,1 or 0 |
// 以下为最标准的viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
二倍图
物理像素和物理像素比
-
物理像素指的是屏幕显示的最小颗粒,是物理真实存在的(分辨率)。做开发时候的1px 不一定等于1个物理像素
-
物理像素比即1个px的能显示的物理像素点的个数
lRetina(视网膜屏幕)与多倍图
-
lRetina:一种显示技术,可以将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度。对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊。
-
**解决方案:**在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题
-
背景缩放
background-size
:该属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;
单位:长度、百分比、cover、contain
cover
把背景图像扩展至足够大,以使背景图像完全覆盖背景区域(高度宽度等比拉伸,覆盖完全覆盖区域)contain
把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域(高度、宽度等比拉伸,可能存在空白区域)
移动开发选择和技术解决方案
移动端开发选择
- 单独制作移动端页面(主流)
- 京东商城
- 淘宝
- 苏宁易购
- 响应式页面兼容移动端:即pc和移动端共用一套网站,只不过在不同屏幕下,样式会自动适配,制作麻烦需要话费大量尽力调兼容性问题
- 三星手机官网
移动端技术解决方案
-
兼容性问题:只需考虑webkit兼容性问题,可以大胆使用H5和CSS3样式,浏览器的私有前缀我们只需要考虑添加 webkit 即可
-
移动端公共样式:移动端CSS 初始化推荐使用 normalize.css
- 保护了有价值的默认值
- 修复了浏览器的bug