<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 id=”main”>

</div>

</body>

</html>

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

联系我：renhanlinbsl@163.com

2016.7.25

11:38

CSS响应式网站开发的更多相关文章

  1. 7 个 Bootstrap 在线编辑器用于快速开发响应式网站

    Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...

  2. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  3. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  4. 使用Bootstrap 3开发响应式网站实践07,页脚

    页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...

  5. 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

    □ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...

  6. 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容

    在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...

  7. 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版

    通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...

  8. 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

    "使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...

  9. 了解Bootstrap和开发响应式网站

    什么是Bootstrap? Bootstrap是Twitter推出的一个开源的用于web前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CS ...

随机推荐

  1. 使用OPEN XML SDK 读取EXCEL中的超链接Hyperlink

    使用OPEN XML SDK 读取EXCEL中的超链接Hyperlink 原理 先创建一个包括全部EXCEL单元格中超链接Hyperlink数据的表,再定位单元格通过列头(如A1,B1)获取超链接信息 ...

  2. 「SNOI2019」通信

    题目 还好我没生在陕西啊 首先发现这个题不能\(dp\),数据范围不大,好像一种网络流的样子啊 哎等等,这样向后面连边不是一个\(DAG\)吗,这不是最小权路径覆盖的板子吗 于是我们套路的拆点,对于一 ...

  3. php结合redis高并发下，悲观锁解决数据二次写入

    悲观锁 在悲观锁的情况下,为了保证事务的隔离性,就须要一致性锁定读.读取数据时给加锁,其他事务无法改动这些数据.改动删除数据时也要加锁,其他事务无法读取这些数据. 在做数据缓存的时候,通常都是把数据从 ...

  4. solidity 汇编语言问题——内存数据mload时为什么从第32位开始

    问题:内存数据mload时为什么从第32位开始 代码出处:https://gist.github.com/axic/5b33912c6f61ae6fd96d6c4a47afde6d pragma so ...

  5. highchart 对于顶端刻度丢失问题

    title: { text: '', align: 'center' }, labels: { overflow: 'justify', formatter: function () { return ...

  6. QT数据类型的转化总结

    QT 中的数据类型有很多的,在写代码的过程中难免会遇到 数据类型的转换. 1.QString转QByteArray QByteArray byte;QString string;byte = stri ...

  7. ESP8266 wifi钓鱼

    原文链接: https://www.cnblogs.com/xiaowuyi/p/6980072.html https://www.cnblogs.com/xiaowuyi/p/7110652.htm ...

  8. day81

    昨日回顾: 昨日回顾: auth组件: -验证:authenticat(request,username=') -登录:login(request,user) -注销:logout(request), ...

  9. 外部Jenkins调用容器中Slave配置实践

    1.Jenkins配置 实现动态生成的Slave节点并调用,解决构建项目出现slave节点任务堵塞或者是slave宕机问题.容器平台采用openshift. 参考配置文档:https://blog.c ...

  10. 校内模拟赛 虫洞(by NiroBC)

    题意: n个点m条边的有向图,每一天每条边存在的概率都是p,在最优策略下,询问从1到n的期望天数. 分析: dijkstra. 每次一定会优先选dp最小的后继走,如果这条边不存在,选次小的,以此类推. ...