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