zoukankan      html  css  js  c++  java
  • H5C3--媒体查询(向上兼容,向下覆盖),link中引入的ont and only

    一.使用

    实例:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport"
     6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     7     <title>Title</title>
     8     <!--使用媒体查询
     9     1.媒体查询主要就是用来查询当前设备的宽度(高度),根据结果动态的设置样式
    10     2.所以:媒体查询的实现的方式就是样式-->
    11     <style>
    12         /*媒体查询的细节--重点理解和掌握 (前提是判断最小值,并且从小到大进行判断.如果是判断最大值,就应该从大到小写)
    13         1.向上兼容:在窄屏设置的样式。默认在大屏也会存在
    14         2.向下覆盖:宽屏的样式设置会覆盖窄屏的样式设置  1000*/
    15         body{
    16             background-color: red;
    17         }
    18         /*@media screen and  (max- 768px){
    19             body{
    20                 background-color: green;
    21             }
    22         }
    23         @media screen and  (max- 992px){
    24             body{
    25                 background-color: blue;
    26             }
    27         }
    28         @media screen and  (max- 1200px){
    29             body{
    30                 background-color: blue;
    31             }
    32         }*/
    33         /* 
    34         需求:设置在不同屏幕宽度时,页面的背景色
    35             1. w < 768px  red
    36             2. 768 <= w < 992 green
    37             3. 992 <= w < 1200 blue
    38             4. w >= 1200 pink
    39          */
    40         @media screen and  (max- 1200px){
    41             body{
    42                 background-color: blue;
    43             }
    44         }
    45         @media screen and  (max- 992px){
    46             body{
    47                 background-color: green;
    48             }
    49         }
    50         @media screen and  (max- 768px){
    51             body{
    52                 background-color: pink;
    53             }
    54         }
    55     </style>
    56 </head>
    57 <body>
    58 </body>
    59 </html>

     二. link引入的时候的not 和 only 

    a.css文件

    1 body{
    2     background-color: red;
    3 }

    b.css文件

    1 body{
    2     background-color: blue;
    3 }

    media="only" 的情况:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport"
     6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     7     <link rel="stylesheet" href="a.css">
     8     <link rel="stylesheet" media="only screen and (min-768px) and (max-992px)" href="b.css">
     9     <!--上面的意思是默认是使用a.css的样式,如果屏幕宽度在768px和992px这个区间的话,就会使用b.css这个样式-->
    11     <title>Title</title>
    12     
    13 </head>
    14 <body>
    15 
    16 </body>
    17 </html>

    media="not" 取反,和上面的only刚好相反的情况:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport"
     6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     7     <link rel="stylesheet" href="a.css">
     8     <link rel="stylesheet" media="not screen and (min-768px) and (max-992px)" href="b.css">
     9     <!--not and only
    10     not:取反:判断不满足条件的情况-->
    11     <title>Title</title>
    12     
    13 </head>
    14 <body>
    15 </body>
    16 </html>
  • 相关阅读:
    tensorflow 2.0 学习 (十) 拟合与过拟合问题
    tensorflow 2.0 学习 (九) tensorboard可视化功能认识
    tensorflow 2.0 学习 (八) keras模块的认识
    tensorflow 2.0 学习 (七) 反向传播代码逐步实现
    tensorflow 2.0 学习 (六) Himmelblua函数求极值
    tensorflow 2.0 学习 (五)MPG全连接网络训练与测试
    arp协议简单介绍
    Pthread spinlock自旋锁
    线程和进程状态
    内核态(内核空间)和用户态(用户空间)的区别和联系·
  • 原文地址:https://www.cnblogs.com/mrszhou/p/8289968.html
Copyright © 2011-2022 走看看