CSS3 @media查询（media适配）

最新推荐文章于 2023-11-02 10:50:44 发布

星灭233

最新推荐文章于 2023-11-02 10:50:44 发布

阅读量1.5k

点赞数

分类专栏： CSS3 文章标签： css3 javascript 前端适配屏幕

本文链接：https://blog.csdn.net/ksx2333/article/details/115916824

版权

CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
media的使用通常是为了适配移动端和pc端浏览器。

1 检测视口宽度

视口简单理解就是可视区域大小我们称之为视口。
在PC端，视口大小就是浏览器窗口可视区域的大小（窗口多大，可视区域/视口就多大）。
在移动端, 视口大小并不等于窗口大小, 移动端视口宽度被人为定义为了980 。
检测视口大小的源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>检测视口宽度</title>
    <script>
     window.onload=function(){
         var viewport_width = document.documentElement.clientWidth
         document.getElementsByTagName("h1")[0].innerHTML = "您的屏幕宽度为"+viewport_width
     }
    </script>
</head>
<body>
 <h1></h1>
</body>
</html>

2 利用media判断屏幕宽度

效果图（根据窗口宽度变化响应）：在这里插入图片描述
css源码：

    <style>
        /* media就是来判断屏幕的宽度的 */
        @media(max-width:1920px){
            body{
                background:blue
            }
        }

        @media(max-width:980px){
            body{
                background-color: blueviolet;
            }
        }

        @media(max-width:720px){
           body{
               background-color: yellow;
           }
        }
        @media(max-width:520px){
           body{
               background-color: rgb(0, 255, 98);
           }
        }
    </style>

3 media判断手机是否横放

orientation: portrait（竖屏，即设备中的页面可见区域高度>=宽度）
orientation: landscape（横屏，即设备中的页面可见区域高度<=宽度）
css源码：

        <style>
        /*如果检测到是横屏的样式就会屏幕变黑*/
            @media (orientation: landscape) {
                body {
                    background-color: #ccc;
                }
            }
        /*如果检测到是竖屏的样式就会屏幕变灰*/
            @media (orientation: portrait) {
                body {
                    background-color: #000;
                }
            }
        </style>

4 media适配屏幕

media通过对不同屏幕的大小进行适配根单位大小，保持等比例。这样转换不同移动端查看网页的时候才不会导致写的样式全盘崩溃。

4.1 用css3的写法

无论是js写法还是css3写法，都是要以rem为单位。
rem是相对单位，相对于根（html）元素单位。

    <style>
        /* 相对单位 */
        /* iphone4/5e */
        @media screen and (min-width:320px) {
            html{
                font-size:42.67px;
            }
        }
        /* galasy5e 360  */
        @media screen and (min-width:360px) {
            html{
                font-size:48px;
            }
        }
        /* iphone6/7/8适配 */
        @media screen and (min-width:375px) {
            html{
                font-size:50px;
            }
        }
        /* iphone6/7/8 plus适配 */
        @media screen and (min-width:414px) {
            html{
                font-size:55.2px;
            }
        }
        @media screen and (min-width:750px) {
            html{
                font-size:100px;  
            }   
        }
        @media screen and (min-width:760px) {
            html{
                font-size:100px;  
            }   
        }
        @media screen and (min-width:1920px) {
            html{
                font-size:100px;  
            }   
        }

        #app{
            width:7.5rem;
            margin:0 auto;
        }
        header{
            width:7.5rem;
            height:1.5rem;
            background:red
        }
</style>

这样写法的缺点就是要对每一个屏幕进行判断，需要不断更新，但可以用js的方法进行统一自判断适配。

4.2 js的方法

(function(doc,win){
    // 网易方案
    var  docEl     = doc.documentElement,   //html
         isIOS     = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //通过bom对象中的userAgent判断手机是否是ios
         dpr       = isIOS? Math.min(win.devicePixelRatio,3):1  //dpr  1 2  3 安卓手机一般是1比2
         scale     = 1/dpr,//dpr是缩放比例
         resizeEvt =  'orientationchange' in window ? 'orientationchange' : 'resize';

     docEl.dataset.dpr =dpr
    
     //我们主动去创建一个meta  主动创建一个视口标签
     var metaEl = doc.createElement("meta")
     metaEl.name="viewport"
     metaEl.content = 'initial-scale='+scale +',maximum-scale='+scale+',minimum-scale='+scale
     docEl.firstElementChild.appendChild(metaEl)
     
     //适配
     var recalc=function(){
         //得到视口  
         var width =  docEl.clientWidth  //800  900  320  375
         if(width/dpr > 750){
            width = 750 * dpr
         }
         docEl.style.fontSize = 100 * (clientWidth/750)+"px"
     }

     recalc()
     win.addEventListener(resizeEvt,recalc,false)
     //兼容的写法
     doc.addEventListener("DOMContentLoaded",recalc,false)   

})(document,window)