您的位置:首页 > 其它

响应式布局

2015-10-08 21:21 260 查看
响应式布局

    a.通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如:width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设 备,将会运用更加的广泛。

    b.media query能够获取哪些值?
    设备的宽和高device-width,device-heigth显示屏幕/触觉设备。
    渲染窗口的宽和高width,heigth显示屏幕/触觉设备。
    设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
    画面比例aspect-ratio点阵打印机等。
    设备比例device-aspect-ratio-点阵打印机等。
    对象颜色或颜色列表color,color-index显示屏幕。
    设备的分辨率resolution。
1.设置 Meta 标签
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2. 通过媒介查询来设置样式 Media Queries
    @media screen and (max-width: 980px) {
      #head { … }
      #content { … }
      #footer { … }
    }
    表示在屏幕宽度小于980像素时,定义各项元素布局效果
3. 宽度需要使用百分比
    #head { width: 100% }
    #content { width: 50%; }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: