响应式布局@media only screen and 解释以及demo

作者：不正经 | 2024-03-29 10:11:17

踩

@media only

摘自：https://blog.csdn.net/qq_34960569/article/details/51775737

only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not(排除某种设备)

/* 常用类型 */
类型解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示，比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视

screen一般用的比较多，下面是我自己的尝试，列出常用的设备的尺寸，然后给页面分了几个尺寸的版本。

/* 常用设备 */
设备屏幕尺寸
显示器 1280 x 800
ipad 1024 x 768
Android 800 x 480
iPhone 640 x 960

两种方式
No.1
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

意思是当屏幕的宽度大于600小于800时，应用styleB.css
No.2

@media screen and (max-width: 600px) {
/当屏幕尺寸小于600px时，应用下面的CSS样式/
.class { background: #ccc; }
}

如果想要在手机端自适应，你还需要写上下面这句话。

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

例如：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    @media screen and (min-width: 1200px) {
        body{
            background-color: antiquewhite;
        }
        p{
            width: 1200px;
            background-color: sienna;
        }
    }
    @media screen and (min-width: 500px) and (max-width: 1023px){
        body{
            background-color: aqua;
        }
        p{
            width: 960px;
            background-color: cadetblue;
        }
    }
</style>
<body>
<p>响应式效果</p>
</body>
</html>

在谷歌浏览器中用开发者工具拉动屏幕会发现出现不同效果！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/335274