media query和响应式布局

最新推荐文章于 2020-02-05 23:15:03 发布

Solaris秋

最新推荐文章于 2020-02-05 23:15:03 发布

阅读量184

点赞数

分类专栏：前端网页设计文章标签： css html

本文链接：https://blog.csdn.net/L1194774003/article/details/104161690

版权

前端网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了如何利用CSS的Media Query实现响应式布局，详细阐述了语法格式、设备特性和注意事项。通过设置不同的布局宽度，确保网页在不同设备上都能良好显示。同时，提到了在开发过程中使用Firefox和Chrome的开发者工具来检查布局效果。

摘要由CSDN通过智能技术生成

media query允许设计者在CSS样式中添加media query表达式，他们可以对媒体类型进行匹配也可以对媒体分辨率色深等各种细节进行匹配所以可以针对不同类型，不同参数细节的媒体设备提供精确控制

语法格式

@media not|only 设备类型 [and 设备特性]*

在上面语法格式中，[ and 设备特性 ] 部分可以出现0~N次]，通过使用多个[ and 设备特性 ]可以对多个设备特性进行匹配

设备类型	说明
screen	计算机屏幕
tty	使用等宽字符的显示设备
tv	电视机类型的显示设备（低分辨率、优先的滚屏能力）
projection	投影仪
handheld	小型手持设备
print	打印界面或打印预览模式
embossed	盲文印刷
braille	盲人点字法反馈设备
aural	语音合成器

#一般使用都会填写screen，平常最多使用的电脑，手机，平板都对应screen

media query中的设备特性

在这里插入图片描述


    <title>Document</title>
    <style type="text/css">
        #container{		 		<!--通用属性-->
            text-align:center;
            margin:auto;
            width:750px;
        }
        #container>div{
            border:1px solid #aaf;
            text-align:left;
            box-sizing:border-box;
            border-radius:12px 12px 0px 0px ;
            padding:5px;
        }
        div#left{
            width:300px;
            height:260px;
            float:left;
        }
    div#main{
        width:450px;
        height:260px;
        float:left;
        clear:right;
    }
        div#right{		 		<!--通用属性结束-->
            width:750px;
            float:left;
        }
        @media screen and (min-width:1000px){			 		<!--当宽度大于1000px时-->
                #container{
                text-align:center;
                margin:auto;
                width:960px;
            }
            #container>div{
                border:1px solid #aaf;
                box-sizing:border-box;
                border-radius:12px 12px 0px 0px ;
                padding:5px;
            }
            div#left{
                width:240px;
                height:260px;
                float:left;
            }
            div#main{
                width:460px;
                float:left;
                height:260px;
                clear:none;
            }
            div#right{
                width:260px;
                float:left;
                height:260px;
            }
        }		 							<!--宽度大于1000px的结束-->
        @media screen and (max-width:480px){			 		<!--宽度小于480px时-->
            #container{
                text-align:center;
                margin:auto;
                width:450px;
            }
            #container>div{
                border:1px solid #aaf;
                box-sizing:border-box;
                border-radius:12px 12px 0px 0px ;
                padding:5px;
            }
            div#left{
                width:450px;
                height:150px;
                float:left;
            }
            div#main{
                width:450px;
                float:left;
                height:260px;
                clear:both;
            }
            div#right{
                width:450px;
                float:left;
                height:170px;
            }
        }							<!--宽度小于480px的结束-->
        
    </style>
</head>
<body>
    <div id="container">
        <div id="left">
            <h2>请填写标题</h2>
            请填写内容。。。。
        </div>
        <div id="main">
            <h2>请填写标题</h2>
             请填写内容。。。。
        </div>
        <div id="right">
            <h2>请填写标题</h2>
           请填写内容。。。。
        </div>
    </div>
</body>
</html>

大于1000px的布局
在这里插入图片描述
480px~1000px的布局

小于480px的布局

注意

在开发时注意通过Firefox或者Google Chrome以及国内谷歌内核浏览器的F12（审查元素）功能在这里插入图片描述
调出可控制网页尺寸的功能来进行检查

这就是响应式布局，设计多套样式分别匹配不同宽度浏览器，已对不同设备进行兼容

手机的响应式布局

各种手机各种品牌的手机多种多样，同时也分iOS和Android两种系统，所以一般的手机网页布局为了统一，宽度都被设计成了980px，在设计时，应当留意针对手机浏览器浏览的宽度设计。
要设置网页具有对手机的响应式布局，要在head标签中添加一段代码

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

上面首先设置了width=device-width，意为将浏览器宽度设置为与设备宽度一致，接下来设置了页面缩放比为1.0（initial-scale=1.0）。如果希望禁止用户对页面缩放，还可以在content属性值后添加user-scalable=no。

Solaris秋

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
media query和响应式布局

media query允许设计者在CSS样式中添加media query表达式，他们可以对媒体类型进行匹配也可以对媒体分辨率色深等各种细节进行匹配所以可以针对不同类型，不同参数细节的媒体设备提供精确控制语法格式@media not|only 设备类型 [and 设备特性]*在上面语法格式中，[ and 设备特性 ] 部分可以出现0~N次]，通过使用多个[ and 设备特性 ]可以对多...
复制链接

扫一扫