<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. The Cat in the Hat POJ - 1289

    题意:给你来两个数A,B  .其中A=(n+1)k, B=nk    输出:(nk-1)/(n-1) 和  ∏ (n+1)k-i ni 思路:关键就是怎么求n和k.本来想这n一定是几个质因数的乘积,那 ...

  2. blinker语音控制Arduino/esp8266开关灯-滑动条使用-文本框交互

    总链接:  https://www.arduino.cn/thread-78393-1-1.html 语音控制:https://doc.blinker.app/?file=005-App%E4%BD% ...

  3. java实现文件监控

    文件监控器: package testfile; import org.apache.commons.io.monitor.FileAlterationListenerAdaptor; import ...

  4. win7/10下Qt Creator调试提示：The selected debugger may be inappropriate for the inferior的解决办法

    在win7/10下Qt Creator调试提示:The selected debugger may be inappropriate for the inferior的错误提示内容如下图所示: 一般弹 ...

  5. 理解HTML5中Range对象

    1.理解Range对象    重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~  什么是Range对象? 在H ...

  6. Android学习之基础知识十四 — Android特色开发之基于位置的服务

    一.基于位置的服务简介 LBS:基于位置的服务.随着移动互联网的兴起,这个技术在最近的几年里十分火爆.其实它本身并不是什么时髦的技术,主要的工作原理就是利用无线电通讯网络或GPS等定位方式来确定出移动 ...

  7. 洛谷P1553 数字翻转（升级版）

    题目链接 https://www.luogu.org/problemnew/show/P1553 题目描述 给定一个数,请将该数各个位上数字反转得到一个新数. 这次与NOIp2011普及组第一题不同的 ...

  8. [05] 动态SQL

    MyBatis的强大特性之一就是它的动态SQL,它可以根据不同的条件动态地组成SQL语句进行执行.为此,MyBatis提供了一系列强大的表达式,本章将就此进行学习,主要内容直接参考的是官方文档< ...

  9. 随机指定范围内N个不重复的数

    此为工具类,支持抽奖业务需求,具体实现见下方代码: package com.org.test; import java.util.ArrayList; import java.util.List; p ...

  10. Bootstrap Modal 使用remote从远程加载内容

        Bootstrap的Modal这个模态窗组件还是很好用的,但在开发的过程中模态窗中的内容大部分都是从后端加载的.要实现模态窗的内容是从后端加载话,常用的实现方式有2种.它们是:     (1) ...