CSS中的响应式布局

最新推荐文章于 2025-03-20 15:52:07 发布

不懂老爱瞎逼逼

最新推荐文章于 2025-03-20 15:52:07 发布

阅读量459

点赞数

分类专栏： css 文章标签： html5 前端 css css3 chrome

本文链接：https://blog.youkuaiyun.com/qq_37493515/article/details/104601758

版权

css 专栏收录该内容

4 篇文章

订阅专栏

一、响应式布局

在小型网站建设中，有运用一套代码代码来适应不同终端分辨率的需求，优点：节约制作时间、节约制作成本、便于维护等优点。
CSS3利用媒体查询（media queries）即可针对不同的媒体类型定义不同的样式，从而实现响应式布局。也可以针对不同的分辨率设置不同的样式。

1024分辨率以上：PC端
1024 ~ 768 : pad pro
768 ~ 450 : pad mini , mobile 横屏
450分辨率以下： mobile 竖屏

二、media的值以及用法：

1、值：
all：用于所有设备
print：用于打印机和打印预览
screen：用于电脑屏幕，平板电脑，智能手机等。
speech：应用于屏幕阅读器等发声设备
2、用法：
A：在style样式表中：

            @media media值 and （分辨率宽度+宽度值）
            @media media值 and （分辨率宽度+宽度值） and （分辨率宽度+宽度值）

B：在外部引入css链接内：

<link rel="stylesheet" href="xxx.css" media="media值 and （分辨率宽度+宽度值）">
<link rel="stylesheet" href="xxx.css" media="media值 and （分辨率宽度+宽度值） and （分辨率宽度+宽度值）">

注：将需要改变的写入media下的css中，正常样式表中写不需要改变的css样式，这样便于后期维护和减少代码工作量

三：media使用方法如下：

1、style样式表中书写方法

<!DOCTYPE html>
<html>
<head>
    <style>
        /* box 盒子大小，默认情况下box页面为红色 */ 
        #box{ width:100px; height:100px; background:red;}
        /* 当浏览器页面最小大于500px时且页面小于1000px时，页面为蓝色 */
        @media all and (min-width:500px) and (max-width:1000px){  
        #box{ background:blue;}
        /* 当浏览器页面最大小于500px时，页面为黄色 */
        @media all and (max-width:500px){  
        #box{ background:yellow;}
    </style>
</head>
<body>
    <p>这是一段测试文字</p>
    <div id="box"></div>
</body>
</html>

2、外部引入css书写方法：

<!DOCTYPE html>
<html>
<head>
     /* 当浏览器页面最小大于500px时且页面小于1000px时，页面为蓝色 */
    <link rel="stylesheet" href="xxx1.css" media="all and (min-width:500px) and (max-width:1000px)">
    /* 当浏览器页面最大小于500px时，页面为黄色 */
    <link rel="stylesheet" href="xxx2.css" media="all and (max-width-width:500px)">
    <style>
        /* box 盒子大小，默认情况下box页面为红色 */
        #box{ width:100px; height:100px; background:red;}
    </style>
</head>

<body>
    <p>这是一段测试文字</p>
    <div id="box"></div>
</body>
</html>

注：link引入的css为正常书写的css文件，只不过是样式需要变化的css的值