CSS3媒体查询+手机自适应

 

媒体查询

媒体查询是可以让网页适用于不同大小屏幕的,写媒体查询时要注意:主样式在前,媒体查询样式在后。 

媒体查询的条件写法,可以从小到大,也可以从大到小,也可以区间取值。

媒体查询的写法:@ media all/screen and (最小值/最大值/区间值),all/screen表示所有屏幕尺寸,包括投影仪、打印机、手机、电脑等。

媒体查询的引入方式有两种:内嵌式和外联式。

内嵌式

<style>
        .block{
            height: 2000px;
            border: 1px solid red;
            margin: 0 auto;
        }

由小到大的区间取值写法:

        @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;
            }
        }

由小到大的写法:

        @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;
            }
        }*/

由大到小的写法:

        @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>

 外联式

<title></title>
    <link rel="stylesheet" media="all and (min-width:320px) and (max-width:767px)" href="320.css">
    <link rel="stylesheet" media="all and (min-width:768px) and (max-width:1023px)" href="768.css">
    <link rel="stylesheet" media="all and (min-width:1024px)" href="1024.css">
</head>

手机自适应

它的作用是覆盖默认的画布(网页)缩放设置,用viewport meta表示,也就是在hear部分再加一个<meta>值,一个网页里面可以有多个<meta>.写法如下:

 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

其中:name=”viewport”表示这个meta的属性是“视口”的意思

           content=”width=device-width表示适可的宽度(浏览器页面的宽度等于设备宽度 )

           initial-scale=1.0表示伸缩比例为1:0(即将页面放大一倍)

           minimum-scale=1.0,maximum-scale=1.0表示最小放大比例为1和最大放大比例为1(即将页面最大放大至设备宽度1倍,最小压缩至设备宽度的一倍)

           user-scalable=no其中 user-scalable表示用户适可缩放,那整个意思表示禁止用户缩放

强制性兼容:

<meta http-equire=”X-UA-Compatible” content=”IE=edge,chrome=1″>

不同浏览器兼容样式:

-ms- IE浏览器(+ * _表示不同版本IE浏览器)

-moz-火狐

-webkit-谷歌

 <style>
        *{
            width: 100px;
            +width:100px;
            *width:100px;
            _width:100px;

            border-radius: 10px;
            -ms-border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
        }
    </style>

css hank 是不同版本IE浏览器的兼容:

只在IE下生效:<!–[if IE]>在IE浏览器显示<![endif]–>

只在IE6下生效:<!–[if IE 6]>在IE6浏览器显示<![endif]–>

只在IE6以上版本生效:<!–[if gte IE 6]>在IE6以上(包括)版本IE浏览器显示<![endif]–>

只在IE6上不生效:<!–[if ! IE 6]>在非IE6浏览器显示<![endif]–>

非IE浏览器生效:<!–[if !IE]>在非IE浏览器显示<![endif]–>

正常情况下,在缩放网页宽度时会出现滚动条,要想不出现滚动条就需要对网页写入媒体查询。一般用来检测手机媒体查询的页面宽度为320px。

像素几种常用的表示:

px,固定的单位值,开发人员常用;

rem,1rem=16px,默认比例,会随着页面margin,padding像素px的设置变化比例;

em,单位    相对于根节点的比例值;

vmax,100个单位划分的比例值;

%,相对于父元素的比例值。

                                              

    原文作者:nrskhdzl
    原文地址: https://blog.csdn.net/nrskhdzl/article/details/85016491
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞