<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. flare-spork: 自己维护的Pig on Spark项目

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zbf8441372/article/details/24726501 关于flare-spork 非 ...

  2. C# Repeater、webdiyer:AspNetPager分页 AspNetPager分页样式

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/vaecnfeilong/article/details/32712611 AspNetPager分页 ...

  3. JS的局部变量和全局变量

    两段JS代码的区别: <script type="text/javascript"> var a = "Hello"; function test( ...

  4. VCS双机+oracle 11gR2+ASM主机名修改

    ----------------------------------------------------------------------------VCS修改主机名---------------- ...

  5. typeof与instanceof的区别是什么？

    在javascript中,判断一个变量的类型可以用typeof (1) 数字类型.typeof返回的值是number.比如说:typeof(1),返回值是number (2) 字符串类型,typeof ...

  6. Linux系统学习之软件安装

    一.源码包编译安装 由于计算机无法直接执行用高级语言编写的源程序,因此想要运行程序,就需要一种机制来让计算机识别,这样程序才可能运行起来.一般来说,计算机中存在解释型和编译型两种语言. 所谓解释型语言 ...

  7. Jquery弹窗组件

    下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...

  8. centos7环境搭建

    1. tar命令安装 yum install -y tar 2. jdk8下载 wget --no-check-certificate --no-cookies --header "Cook ...

  9. springadmin环境搭建

    一路走过来都是坑,记录下来以后避免在踩 springboot版本信息2.0.3 admin服务端 maven配置信息 <properties> <project.build.sour ...

  10. Nginx-PHP优化设置 + lnmp调优的关键影响因素 + php-fpm + nginx返回码 + tcp调优 + 最大文件描述符

    https://www.cnblogs.com/zengkefu/p/5602473.html最大文件描述符 https://blog.csdn.net/fanren224/article/detai ...