zoukankan      html  css  js  c++  java
  • css响应式布局RWD

    响应式布局结合了三大理念:

    1)用于布局的弹性网络(百分比定义宽度)

    2)用于图片和视频的弹性媒体

    3)媒体查询

    在布局中,需要注意的点有:

    1)尽量用min-width/max-width,max-height/min-height代替width,height

    2)尽量使用百分比,em为单位代替精确值

    3)采用媒体查询

    二、媒体查询

    IE8以下不支持媒体查询,需要引入

    <!-- if lte IE 8>
    <script src="response.min.js"></script>
    <![endif]-->

    媒体查询需要设置断点,常见的断点如480px,769px等。也可以逐渐缩小浏览器的宽度,观察布局效果来引入。

    媒体查询引入的方式有两种

    1)通过link标签引入

    <link rel="stylesheet" href="css/small.css" media="(max-480x)">
    <link rel="stylesheet" href="css/large.css" media="(min-769x)">
    <link rel="stylesheet" href="css/large.css" media="(min-480px) and max-width(768px)">

    2)将查询包含在样式表中

    @media(max-480px){
    }
    @media(min-480px) and (max-768px){
    }
    @media(min-769px){
    }
  • 相关阅读:
    嵌入式系统引导和启动的流程
    microblaze以太网程序
    机试题
    共模差分 对比
    xilinx XPS无法启动的问题
    FPGA开发流程
    Mel-Frequency-Warping
    微软-黄学东-清华大学FIT楼报告-20170407
    Matlab
    Anaconda安装
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/6235001.html
Copyright © 2011-2022 走看看