移动端开发基础

1. viewport

属性	说明
width	使用与设备无关的像素表示所需的视区宽度。 它可以是明确的数字（如 240）或最好是相对值，如 device-width。
height	使用与设备无关的像素表示所需的视区高度。 它可以是明确的数字（如 320）或最好是相对值，如 device-height。
initial-scale	表示首次加载页面时所需的缩放级别。 值 1 表示应使用自然大小呈现页面，根本不进行缩放。值 2 将页面大小加倍， 依此类推。 您也可以使用十进制值，例如“1.0”。
minimum-scale	表示页面允许的最低缩放级别。 值 1 表示用户不能将页面缩小到低于自然大小。
maximum-scale	表示页面允许的最大缩放级别。 最大值为 10.0。
user-scalable	yes/no 属性，用于表示是否允许用户缩放页面。

常见用法：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

 2. 媒体类型（media type）

常见用法：

<!--方法一 -->
<link href="style.css" media="screen">

<!--方法二 -->
@media screen{
    selector{rules}
}

另外，媒体类型支持not、only关键词

@media only screen{
      selector{rules}  
}

3. 媒体查询（media query）

语法结构：

1. @media 媒体类型 and (css属性:值)

@media screen and (max-width:240px){
    body{font-size:medium;}
}

2. @media 媒体类型 and (css属性:值), 媒体类型 and (css属性:值)

@media handheld and (min-width:360px),screen and (min-width:480px){
    body{font-size:large;}
}

 4. 横竖屏(landscape/portrait)

/*竖屏*/
@media screen and (orientation:portrait) {
    selector{rules}
}

/*横屏*/
@media screen and (orientation:landscape) {
    selector{rules}
}