移动端基础
移动端浏览器
国内移动端浏览器内核是根据webkit修改过来的,国内尚无自主研发的内核,主要对webkit内核进行兼容。
移动端调试方法
打开谷歌浏览器的开发者工具,点击下图按钮即可进入移动端开发
视口
视口(viewport)是浏览器显示页面内容的屏幕区域,视口可分为布局视口、视觉视口和理想视口。
布局视口
一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。元素看上去很小,一般默认可以通过手动缩放网页。
视觉视口
用户正在看到的网站区域,,这个区域的宽度等同于移动设备的浏览器窗口的宽度。可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。
理想视口
- 为了使网站在移动端有最理想的浏览和阅读宽度
- 需要手动添写meta视口标签通知浏览器操作
- meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致
meta视口标签
标准viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
二倍图
- 物理像素:分辨率
- 物理像素比:一个px能显示的物理像素点的个数;
- 视网膜屏幕(Retina):把更多的物理像素点压缩至一块屏幕里
- 多倍图:比原来尺寸像素大多倍的图片
- background-size: 宽度和高度(如果只写一个参数,会作为宽度等比例缩放)、百分比、cover(完全覆盖)、contain(将图片高度宽度等比例拓展到最大,当高度或宽度铺满盒子就不再拉伸);
移动端开发选择
- 单独制作移动端页面(主流)
通常网址域名前面添加m(mobile)可以打开移动端
- 响应式页面兼容移动端
通过改变屏幕宽度来改变样式,以适应不同终端
移动端技术解决方案
移动端浏览器基本以webkit内核为主,考虑wenkit兼容性问题,可以放心使用H5标签和CSS3样式。
- CSS初始化:normalize.css
- CSS盒子模型
box-sizing: border-box CSS3盒子模型,不会撑大盒子(标准盒模型)
box-sizing:content-box 传统盒子模型(怪异盒模型)
移动端常见布局
移动端技术选型
- 单独制作移动端页面
- 流式布局(百分比布局)
- flex弹性布局
- less+rem+媒体查询布局
- 混合布局
- 响应式页面兼容移动端
- 媒体查询
- bootstrap
总结
上述知识是移动端web开发的入门知识,后续会有详细的教程介绍常见布局方法。