css响应式布局

css响应式布局

一、如何进行响应式布局样式

写响应式布局我们用到 style 的 media 属性

方式一：在html直接style [media] 写样式

<style media="screen">
    h1{
        color: green;
    }
    ...
</style>
<style media="print">
    h1{
        font-weight: 500;
    }
    p{
        display: none;
    }
    ...
</style>

方式二：使用link引入css响应式布局样式

<link rel="stylesheet" href="css/common.css" media="all">
<link rel="stylesheet" href="css/screen.css" media="screen">
<link rel="stylesheet" href="css/print.css" media="print">

方式三：使用link引入主css入口，里面使用@import引入 响应式布局样式

<link rel="stylesheet" href="css/import.css">

import.css

@import "common.css" all;
@import "print.css" print;
@import "screen.css" screen;

方式四：直接在 style 里面使用 @media

<style>
   	@media screen and (max-width: 600px) {
        h1{
            display: none;
        }
    }
</style>

二、关键字

关键字一：and
<style>
	/*多个条件使用and进行连接*/
   	@media screen and (min-width:600px) and (max-width: 1200px){
        h1{
            display: none;
        }
    }
</style>
关键字二：or
<!--   我们使用或 在 css中是用“,”号连接的-->
<style media="screen and (orientation:landscape),screen and (min-width:600px)">
    h1{
        color: bisque;
    }
</style>
关键字三：not
<!--   我们使用非 在 css中是 not-->
<style>
    @media not screen and (orientation:landscape),screen and (min-width:600px){
        h1{
            color: bisque;
        }
    }
</style>
关键字四：only
<!-- 用来忽略低端浏览器的 -->
<style>
    @media only screen and (orientation:landscape),screen and (min-width:600px){
        h1{
            color: bisque;
        }
    }
</style>

三、区间划分

Extra small      <576px
Small            ≥576px
Medium           ≥768px
Large            ≥992px
Extra large      ≥1200px
转载：https://www.cnblogs.com/huoshaoyun/p/14300385.html
0 0
讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！
帮助