CSS3自适应及@media媒体查询---kalrry

kalrry
623 阅读1分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、CSS3自适应

手机自适应允许网页宽度自动调整，需要在前面加一个meta标签：

<meta name="viewport" content="width=device-width，initial-scale=1.0,maximum-scale=3.0,minimum-scale=1.0，user-scalable=no"/>
  1. name="viewport" 指视口
  2. width=device-width，宽度为视口的宽度
  3. initial-scale=1.0,屏幕分辨率大小
  4. maximum-scale=3.0, 最大比例
  5. minimum-scale=1.0，最小比例
  6. user-scalable=no，禁止用户缩放

meta标签使得网页的宽度等于视口的宽度，网页缩放比例（initial-scale=1）为1，代表页面在视口中按实际尺寸显示，没有任何缩放。

若网页为固定模式布局，要想手机移动端自适应，meta标签可以这样写：

<meta name="viewport" content="width=device-width, maximum-scale=3.0,width=300px,user-scalable=1/0"/>

二、自适应移动端和PC端

1.媒体查询动态布局

 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
 <link rel="stylesheet" media="screen and (min-width:320px) and (max-width:767px)" href="css/320px_768px.css"/>
 <link rel="stylesheet" media="screen and (min-width:768px) and (max-width:1023px)" href="css/768px_1024px.css"/>
 <link rel="stylesheet" media="screen and (min-width:1024px)" href="css/1024px_1360px.css"/>

2.强制性兼容

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

三、CSS3媒体查询

  1. 写媒体查询需要注意：主样式在前，媒体查询在后。
  2. 媒体查询条件的写法有三种，从小到大，从大到小，还有分辨率分区间查询的写法
  3. 采用这两种方式一定一定要注意分辨率的大小顺序!!!

1.分辨率从小到大

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            height: 2000px;
            border: 1px solid red;
            margin: 0 auto;
        }
       @media all and (min-width: 768px) {
            .block{
                width: 680px;
                background-color: yellow;
            }
        }
        @media all and (min-width: 1024px) {
            .block{
                width: 768px;
                background-color: blue;
            }
        }
        @media all and (min-width: 1580px) {
            .block{
                width: 1190px;
                background-color: red;
            }
        }
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

2.分辨率从大到小

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            height: 2000px;
            border: 1px solid red;
            margin: 0 auto;
        }
        @media all and (max-width: 1580px) {
            .block{
                width: 1190px;
                background-color: red;
            }
        }

        @media all and (max-width: 1024px) {
            .block{
                width: 768px;
                background-color: blue;
            }
        }

        @media all and (max-width: 768px) {
            .block{
                width: 680px;
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

3.分区间查询的写法

	    @media all and (min-width: 768px) and (max-width: 1024px) {
            .block{
                width: 680px;
                background-color: yellow;
            }
        }
        @media all and (min-width: 1024px) and (max-width: 1380px) {
            .block{
                width: 1024px;
                background-color: blue;
            }
        }
        @media all and (min-width: 1580px) {
            .block{
                width: 1190px;
                background-color: red;
            }
        }

四、参考

参考1 参考2 参考3 @media媒体查询参考4

avatar
文章
阅读
粉丝