CSS响应式网站开发
<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>
记录下来，留待后查，也方便别人。
2016.7.25
11:38
CSS响应式网站开发的更多相关文章
- 7 个 Bootstrap 在线编辑器用于快速开发响应式网站
Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
- 使用Bootstrap 3开发响应式网站实践07,页脚
页脚部分比较简单,把一个12列的Grid切分. <footer> <div class="container"> <div class="r ...
- 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容
□ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...
- 使用Bootstrap 3开发响应式网站实践04,使用Panels展示内容
在Bootstrap页面中,通常用Panels来展示主要功能的内容.该部分Html为: <div class="row" id="featureHeading&qu ...
- 使用Bootstrap 3开发响应式网站实践03,轮播下方的内容排版
通常把一些重要信息.需要重点标注的信息放在轮播的下方显示,这部分区域用到了大字体的标题.副标题以及段落文字等. <div class="row" id="bigCa ...
- 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等
"使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...
- 了解Bootstrap和开发响应式网站
什么是Bootstrap? Bootstrap是Twitter推出的一个开源的用于web前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CS ...
随机推荐
- UVA506-System Dependencies(拓扑序)
Problem UVA506-System Dependencies Accept:285 Submit:2824 Time Limit: 3000 mSec Problem Description ...
- 分布式服务化系统一致性（分布式事务、ACID、BASE、CAP）原理与解决方案
https://blog.csdn.net/rickiyeat/article/details/70224722
- ethereum/EIPs-55 Mixed-case checksum address encoding
eip title author type category status created 55 Mixed-case checksum address encoding Vitalik Buteri ...
- mysql explain（转）
explain显示了mysql如何使用索引来处理select和表连接 转自http://blog.csdn.net/zhuxineli/article/details/14455029 explain ...
- matlab：inv，pinv逆与伪逆
对于方阵A,如果为非奇异方阵,则存在逆矩阵inv(A)对于奇异矩阵或者非方阵,并不存在逆矩阵,但可以使用pinv(A)求其伪逆 inv: inv(A)*B实际上可以写成A\BB*inv(A)实 ...
- 1-微信小程序开发(安装软件和运行第一个微信小程序)
https://developers.weixin.qq.com/miniprogram/dev/ 我的 打开 上传成功后
- Python 爬取 11 万 Java 程序员信息竟有这些重大发现！
一提到程序猿,我们的脑子里就会出现这样的画面: 或者这样的画面: 心头萦绕的字眼是:秃头.猝死.眼镜.黑白 T 恤.钢铁直男-- 而真实的程序猿们,是每天要和无数数据,以及数十种编程语言打交道.上能手 ...
- postgrepsql 创建函数
-- 这里的CREATE OR REPLACE FUNCTION 为固定写法: "public"."function_info_a1" 这个为函数名 C ...
- Spring Boot 之 Profile 使用
Spring Boot 之 Profile 使用 一个应用为了在不同的环境下工作,常常会有不同的配置,代码逻辑处理.Spring Boot 对此提供了简便的支持. 关键词: @Profile.spri ...
- 来不及说什么了，Python 运维开发剁手价仅剩最后 2 天
51reboot 运维开发又双叒叕的搞活动了—— Python 运维开发 18 天训练营课程, 剁手价1299 最后2天 上课方式:网络直播/面授(仅限北京) DAY1 - DAY4 Python3 ...