如何通过css3来检测屏幕和设置不同的样式

浏览:1863 发布日期:2016/11/27 分类:css3 关键字: css3媒体查询 css3常用属性

 css3"@media"的新增属性能够检测用户的屏幕大小,并在"{  }"设置相关的样式,便能完成响应式布局了,“

screen and (max-width:414px)

”这个意思是最大宽度为414px,在414px的宽度可以设置它的样式,"@media"不仅仅可以设置宽度的样式,也能设置高度的样式,iphone5和phone4是同样的宽度,但高度却相差太大,我们也可以在宽度查询中再插入高度,这样各种屏幕的都能适应

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>测试颜色</title>
    <style>
    @media screen and (max-width:414px) {
        body {
            background: yellow
        }
    }
    
    @media screen and (max-width:375px) {
        body {
            background: red
        }
    }
    
    @media screen and (max-width:360px) {
        body {
            background: #ccc;
        }
    }
    
    @media screen and (max-width:355px) {
        body {
            background: #000;
        }
    }
    
    @media screen and (max-width:320px) {
        body {
            background: green
        }
        @media screen and (max-height:480px) {
            body {
                background: #f0F
            }
        }
    }
    </style>
</head>

<body>
  <p>如果你看到的手机颜色就是黄色 你使用的是iphone 6 plus 你的手机屏宽度为414px</p>
  <p>如果你看到的手机颜色就是红色 你使用的是iphone 6  你的手机屏宽度为375px</p>
  <p>如果你看到的手机颜色就是绿色 你使用的是iphone 5  你的手机屏宽度为320px</p>
  <p>如果你看到的手机颜色就是紫色 你使用的是iphone 4  你的手机屏宽度为320px 高度为 480px</p>
  <p>如果你看到的手机颜色就是灰色   你的手机屏宽度为360px</p>
  <p>如果你看到的手机颜色就是黑色   你的手机屏宽度为355px</p>
  <p>如果你看到的手机颜色就是白色 你使用的是电脑 或者平板 </p>
</body>
</html>


评论(29 相关
很好,很强大啦。
回复 手机贷 2017-05-16
至此分享。
回复 立刻贷 2017-05-28
过来看看啦。
回复 聚币网 2017-07-15
聚币网:http://www.yueweipanw.com 领先的数字货币交易平台。
回复 聚币网 2018-02-03
iphone5和phone4是同样的宽度
火牛视频:http://www.sohuo.com 精彩不容错过。
写的很好,继续支持
文章很受用,很适合新手阅读
非常好的东西!·
非常好的东西
不错 值得学习一下
博主分享的不错的啦,学习了不少,文章很好收获很大
感谢分享 继续支持
学习了
文章内容很精彩
写的很好 继续支持
文章说的不错啦,可以支持一下
这个说的不错,学习了,反手赞一个
说的不错哈,支持一下啦
文章的内容不错哈,支持一下
写的很好 很喜欢
博主很有才
非常不错 值得学习
内容精彩 值得学习分享
很好 值得学习分享
内容精彩
文章内容精彩,支持一下哈
不错 支持下 学习了
支持下 很不错

发表评论

必填

选填

选填