<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. Scala 类型界定

    class User(val userName: String,val age: Int) extends Comparable[User] { override def compareTo(o: U ...

  2. MYSQL中的int(11)到底代表什么意思？

    对于int类型的一些基础知识其实上图已经说的很明白了,在这里想讨论下常用的int(11)代表什么意思,很长时间以来我都以为这代表着限制int的长度为11位,直到有天看到篇文章才明白,11代表的并不是长 ...

  3. go标准库的学习-hash

    参考:https://studygolang.com/pkgdoc 导入方式: import "hash" hash包提供hash函数的接口. type Hash type Has ...

  4. python函数查询、数学和比较操作符、二元操作符

    http://www.runoob.com/python/func-number-round.html print().input()用户输入输出,格式为字符串 len() 求字符串的长度 str() ...

  5. catkin init/build 遇到catkin：command not found 的解决办法。

    https://blog.csdn.net/AmbitiousRuralDog/article/details/80742177

  6. C语言程序设计II—第五周教学

    第五周教学总结(25/3-31/3) 教学内容 本周的教学内容为:第七章 数组 7.3 字符串. 课前准备 在博客园发布作业:2019春第五周作业 第四周作业讲解视频:A Programing Vid ...

  7. TerraExplorer Add-ons 和TEZ使用说明

    1.    概述 Skyline提供了丰富的API,用户可以根据不同实际需求,进行二次开发封装,实现各种功能的扩展和定制.当我们开发了各种功能页面或者应用程序后,如何将它们快速嵌入到TerraExpl ...

  8. Tensorflow-hub[例子解析2]

    接Tensorflow-hub[例子解析1]. 3 基于文本词向量的例子 3.1 创建Module 可以从Tensorflow-hub[例子解析1].中看出,hub相对之前减少了更多的工作量. 首先, ...

  9. [01] Why Spring

    1.何为框架 简单来说,框架就是制定了一套规范或者规则(思想),让程序员在该规范或规则下进行工作.如上图修楼房,在有框架的情况下,修建工作才高效且有条不紊.楼层钢架规定了大楼的结构,工人按架构添砖放瓦 ...

  10. Luogu4609 FJOI2016 建筑师 第一类斯特林数

    题目传送门 题意:给出$N$个高度从$1$到$N$的建筑,问有多少种从左往右摆放这些建筑的方法,使得从左往右看能看到$A$个建筑,从右往左看能看到$B$个建筑.$N \leq 5 \times 10^ ...