响应是Web设计笔记（1）媒体查询

浏览数：34 / 时间：2015年06月09日

媒体查询语法

        <style type="text/css">
            @media screen and (min-width:960px ) {
                .cnblogs_code{
                    background-color: gray;
                }
            }
            @media screen and (max-width:960px){
                .cnblogs_code{
                    background-color: red;
                }
            }     
            @media screen and (max-width:768px){
                .cnblogs_code{
                    background-color: orange;
                }
            }
            @media screen and (max-width:550px){
                .cnblogs_code{
                    background-color: yellow;
                }
            }
            @media screen and (max-width:320px ) {
                .cnblogs_code{
                    background-color: white;    
                }
            }
            /*设备device屏幕的大小，可以通过浏览器F12调整如下图*/
            @media screen and (max-device-width:400px){
                .cnblogs_code{
                    background-color: green;
                }
            }
            /*orientation设备处于横向还是纵向*/
            @media screen and (orientation:portrait) {
                body{
                    background-color: black;
                }
            }
        </style>

 

 技术分享

 

上面例子我加在文章中了。您可以通过改变浏览器的大小可以看到效果（"标题"的背景颜色）

至于 orientation 介绍用 模拟器Opera moblie

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style com log src http it la sp class style com log src http it la sp

相关文章

随机文章

您可能还喜欢

您可能还喜欢