<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. [题目] Luogu P3707 [SDOI2017]相关分析

    参考资料:[Luogu 3707] SDOI2017 相关分析 P3707 [SDOI2017]相关分析 TFRAC FRAC DFRAC \(\tfrac{\sum}{1}\) \(\frac{\s ...

  2. ARDUINO 中断

    设置中断函数   attachInterrupt() attachInterrupt(interrupt, function, mode) 描述: 当发生外部中断时,调用一个指定函数.当中断发生时,该 ...

  3. mysql order by 排序的问题

    参考博客http://blog.csdn.net/hollboy/article/details/13296601 mysql order by 的排序在今天时候遇到了问题 情景是:将排序的字段设置成 ...

  4. 【转】利用python的KMeans和PCA包实现聚类算法

    转自:https://www.cnblogs.com/yjd_hycf_space/p/7094005.html 题目: 通过给出的驾驶员行为数据(trip.csv),对驾驶员不同时段的驾驶类型进行聚 ...

  5. mysql获取表中数据行数

    获取单个表的行数 使用count(*)或者count(1) SELECT count(1) AS count FROM table_name; 执行结果 获取两个表的行数 使用union组合每个sel ...

  6. linux随手笔记(Centos为主)

    用户管理 1.用户管理配置文件 用户数据文件:/etc/passwd [root@CentOS-Test software]# grep test /etc/passwd test:x:500:500 ...

  7. centos 6 中恢复删除的文件

    CentOS 6 安裝 extundelete:: ##############测试的时候需要2块硬盘############### yum install e2fsprogs-devel e2fsp ...

  8. QT pro文件详细写法+实例

    很多的初学者都没有注意pro 文件的内容 今天简单的介绍一下 这个文件主要内容 TEMPLATE:这个变量是用来定义你的工程将被编译成什么模式.如果没有这个设置,系统将默认编译为application ...

  9. <转>浅谈缓存击穿、缓存并发和缓存失效

    原文地址:缓存穿透.缓存并发.缓存失效之思路变迁 我们在用缓存的时候,不管是Redis或者Memcached,基本上会通用遇到以下三个问题: 缓存穿透 缓存并发 缓存失效 一.缓存穿透       注 ...

  10. Omi框架学习之旅 - 插件机制之omi-touch 及原理说明

    这个插件也能做好多好多的事,比如上拉下拉加载数据,轮播,等一切和运动有关的特效. 具体看我的allowTouch这篇博客,掌握了其用法,在来看它是怎么和omi结合的.就会很简单. 当然使用起来也比较方 ...