了解移动端基础
浏览器
移动端的浏览器大多都是基于webkit修改的内核,国内尚无自主研发的内核。所以,兼容移动端主流浏览器,处理webkit内核浏览器即可。
手机屏幕现状
移动端设备屏幕尺寸非常多,碎片化严重。
Android设备有多种分辨率:400 * 800,480 * 854,540 * 960,720 * 1290,1080 * 1920等。
近年来iPhone的碎片化也加剧了,640 * 960,640 * 1136,750 * 1334,1242 * 2208等。
移动端调试方法
- Chrome DevTools的模拟手机调试。
- 搭建本地web服务器,通过手机访问。
- 使用外网服务器,直接ip或域名访问。
视口
视口(viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。
布局视口 layout viewport
- 一般移动设备的浏览器都默认设置来一个布局视口,用于解决早期的PC端页面在手机上的显示问题。
- IOS,Android 基本都将这个视口分辨率设置为980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面。
视觉视口 visual viewport
- 字面意思,它是用户正在看到的网站的区域。 注意:是网站的区域。
- 我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。
理想视口 ideal viewport
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口,对设备来讲,是最理想的视口尺寸
- 需要填写meta视口标签通知浏览器操作
- meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解- 就是设备有多宽,我们布局的视口就多宽。
<meta>视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
二倍图
物理像素和物理像素比
- 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了。
- 我们开发时候的1px不是一定等于1个物理像素的。
- PC端页面,1个px等于1个物理像素的,但是移动端就不尽相同。
-
一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比。
多倍图
- 对于一张50 * 50 的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊。
- 在标准的viewport设置中,使用倍图来提高图片质量,解决在高清设备中的模糊问题。
- 通常使用二倍图,因为iPhone 6/7/8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求。
- 背景图片注意缩放问题。
移动端开发选择
- 单独制作移动端页面(主流)
- 响应式页面兼容移动端(其次)
移动端常见问题解决方案
移动端浏览器主要以webkit为主,因此我们只需要考虑webkit兼容性问题。
我们可以放心使用H5和CSS样式。
同时我们浏览器的私有前缀我们只需要考虑添加-webkit-即可。
移动端CSS初始化推荐使用normalize.css
官网:https://necolas.github.io/normalize.css/
移动端技术选型
单独制作移动端页面(主流)
- 流式布局(百分比布局)
- flex弹性布局(强烈推荐)
- less + rem +媒体查询布局
- 混合布局
响应式页面兼容移动端(其次)
- 媒体选择
- bootstrap
流式布局(百分比布局)
- 流式布局,就是百分比布局,也称非固定像素布局
- 通过将盒子的宽度设置成百分比,从而根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充
- 流式布局方式是移动web开发使用的比较常见的布局方式
注意
制作过程中,需要定义页面的最大和最小支持宽度
- max-width最大宽度 (max-height最大高度)
- min-width最小宽度(min-height最小高度)
flex布局
- 操作方便,布局极为简单,移动端应用很广泛
- PC 端浏览器支持情况较差
- IE 11或更低版本,不支持或仅部分支持
原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
flex布局父项常见属性
- flex-direction: 设置主轴方向
- justify-content: 设置主轴上的子元素排列方式
- flex-wrap: 设置子元素是否换行
- align-content: 设置侧轴上的子元素的排列方式(多行)
- align-items: 设置侧轴上的子元素排列方式(单行)
- flex-flow: 复合属性,相当于同时设置了 flex-direction 和flex-wrap
rem
- rem -- root em是一个相对单位,类似于em,em是父元素字体大小。
- 不同的是rem的基准是相对于html标签元素的字体大小
- 比如,根元素html设置font-size=12px;非根元素设置width:2rem;转化成px就是24px
- rem的优势:父元素文字大小可能不一致,但是整个页面只有一个html,可以很好的来控制整个页面的元素大小比例。
媒体查询
- 用@media开头 注意@符号
- mediatype媒体类型
- 关键字 and not only
- media feature 媒体特性 必须有小括号包含
@media mediatype and|not|only (media feature){
css-code;
}
max-width min-width都包含等于
less
css弊端
- css需要书写大量看似没有逻辑的代码,css冗余度是比较高的
- 不方便维护及扩展,不利于复用
- css没有很好的计算能力
- 非前端开发工程师来讲,往往会因为缺少css编写经验而很难写出组织良好且易于维护的css代码项目
less简介和安装
- Less Leaner Style Sheets 是一门 CSS扩展语言,也成为CSS预处理器。
- 做为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性
- 它在CSS的语法基础上,引入来变量,Mixin(混入),运算以及函数等功能,大大简化来CSS的编写,并且降低了CSS的维护成本,就像它的名称
Less是一门CSS预处理语言,它扩展了CSS的动态特性。
安装
npm install -g less
Less变量规则
- 必须以@开头
- 不能包含特殊符号
- 数字不能开头
- 大小写敏感
Less运算
- 参与运算的数字,可以一个有单位一个没有,最终单位就是唯一那个单位
- 参与运算的两个数字,两个都有单位取第一个的
- less的运算符左右必须加空格
Less实际开发适配方案1:rem+媒体查询+less技术
响应式页面兼容移动端
- 媒体查询
- Bootstrap
Bootstrap
优点
- 标准化html + css 编码规范
- 提供了一套简洁、直观的组建
- 有生态圈,不断更新迭代
- 让开发更简单,提高效率