zoukankan      html  css  js  c++  java
  • 响应式布局之媒体查询 @media

    Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。

    媒体查询有两种玩法,第一种,直接在link中判断设备的尺寸,然后引用不同的css文件

    <link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min- 500px)">

    意思是当屏幕的宽度大于等于500px的时候,应用styleA.css

    screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型(自行度娘)

    and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)

    (min- 500px) 就是媒体特性(Media features) (自行度娘)

    <link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min- 500px) and (max- 1000px)">

    意思是当屏幕的宽度大于500小于1000时,应用styleB.css

    第二种,直接写在<style>标签里

    @media screen and (max-1000px) { /*当屏幕尺寸小于1000px时,应用下面的CSS样式*/
      .class {
        background: #ccc;
      }
    }

    要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。

    bootstrap中的container类

    @media (min- 768px) {
      .container {
        width: 750px;
      }
    }
    @media (min- 992px) {
      .container {
        width: 970px;
      }
    }
    @media (min- 1200px) {
      .container {
        width: 1170px;
      }
    }
  • 相关阅读:
    Java中“==”与equals的区别以及equals方法的重写
    Java中的Switch....case语句:
    Java中的基本数据类型
    HTTP与HTTPS的区别
    深入理解HTTP协议、HTTP协议原理分析
    IntelliJ IDEA下的使用git
    Spring RestTemplate详解
    Java 适配器(Adapter)模式
    LINUX的ssh免密码配置
    CDH6.2安装配置第一篇:CDH配置本地http服务
  • 原文地址:https://www.cnblogs.com/zcynine/p/5006053.html
Copyright © 2011-2022 走看看