CSS响应式网站开发

最新推荐文章于 2021-08-10 20:10:36 发布

Daneeeee

最新推荐文章于 2021-08-10 20:10:36 发布

阅读量204

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/renhanlinbsl/article/details/52209959

版权

HTML/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<html>

<head>

//当设备屏幕最大宽度小于1024px时加载如下CSS内容

@media screen and (max-width: 1024px){
            body{
                width:1024px;
            }
            #main{
             background-image:url(img/bg1.jpg);
            }
        }

//all代表所有类型的设备

@media all and (max-width: 1024px){
            body{
                width:1024px;
            }
            #main{
             background-image:url(img/bg1.jpg);
            }
        }

//简写

@media and (max-width: 1024px){
            body{
                width:1024px;
            }
            #main{
             background-image:url(img/bg1.jpg);
            }
        }

//可以使用and, or, not进行运算

//判断方向是否为纵向

@media and (max-width: 1024px) and (orientation:portrait){
            body{
                width:1024px;
            }
            #main{
             background-image:url(img/bg1.jpg);
            }
        }

</head>

<body>

</div>

</body>

</html>

记录下来，留待后查，也方便别人。

联系我：renhanlinbsl@163.com

2016.7.25

11:38

优惠劵

Daneeeee

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS响应式网站开发

//当设备屏幕最大宽度小于1024px时加载如下CSS内容@media screen and (max-width: 1024px){ body{ width:1024px; } #main{ background-image:url(img/bg1.jpg);
复制链接

扫一扫