移动端开发基础

时间：2014-12-08 10:28:31 阅读：147 评论：0 收藏：0 [点我收藏+]

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">

常见用法：

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

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

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

@media only screen{
      selector{rules}  
}

语法结构：

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;}
}

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

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

原文地址：http://www.cnblogs.com/zhouwenhong/p/4150403.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行