移动端-基础

开发现状

• 浏览器：兼容主流浏览器，处理webkit内核浏览器即可
• 屏幕：碎片化严重，开发者无需关注这些分辨率，常用单位为px

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可分为布局视口、视觉视口和理想视口。

布局视口（layout viewport）

• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上的显示问题。
• IOS、Android基本都将这个视口分辨率设置为980px，所以PC上的页面在手机上可以显示，但元素比较小，默认可以通过手动缩放。

视觉视口（visual viewport）

• 指用户正在看到的网站区域。
• 可以通过缩放去操作视觉视口，但不会影响视觉视口。

理想视口（ideal viewport）

• 页面自适应屏幕宽度
• 需要手动添加meta视口标签

//mate视口标签 单标签
<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端，1px等于一个物理像素，但移动端不经相同
• 一个px能显示的物理像素点的个数，称为物理像素比

媒体查询

媒体查询(Media Query)

• 可以针对不同媒体类型定义不同样式
• 针对不同屏幕尺寸设置不同样式
• 屏幕大小改变会重新渲染页面

//语法
@media mediatype and|not|only (media feature){
    CSS-Code
}
mediatype: 将不同的终端划分为不同类型，称为媒体类型
    all: 所有类型
    pring: 用于打印机和打印预览
    scree: 用于屏幕
and|not|only: 关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
media feature: 媒体特性
    width: 定义输出设备中可见宽度
    min-width: 定义输出设备中页面最小区域宽度
    max-width: 定义输出设备中页面最大区域宽度

rem

rem(root em)是一个相对单位，类似于em，em是父元素字体大小，不同的是rem是基准是相对于html元素的字体大小。设置根元素(html)的字体大小font-size=12px,非根元素设置width:2rem，换算成px就是24px

less

Less(Leaner Style Sheets)是css扩展语言，也称为css预处理器，在css的基础上引入了变量、Mixin(混入)、运算以及函数等功能。常见的CSS预处理器有：Sass、Less、Stylus