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 ...
随机推荐
- 3D数学读书笔记——矩阵基础
本系列文章由birdlove1987编写,转载请注明出处. 文章链接:http://blog.csdn.net/zhurui_idea/article/details/24975031 矩 ...
- 检測iPhone/iPad设备方向的三种方法
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/iefreer/article/details/24210391 使用meta tag "v ...
- HTML和CSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo. 处理这个问题的核心关键点是 ...
- Linux之GDB学习
Linux之GDB学习 GDB是一款优秀的调试工具,懂的人自然懂,一直以来用它都没有好好整理过使用方法,我用的也是皮毛,目前先整理一下皮毛,日后再更新 使用方法 编译C++ 从编译的角度上来说,需要在 ...
- day14 Python集合
定义:由不同元素组成的集合,集合是一组无序排列的可hash值,可以作为字典的key 1.不同元素.2.无序.3.集合中元素必须是不可变类型(数字,字符串,元祖) 特性:集合的目的是将不同的值存放在一起 ...
- 初级算法-6.两个数组的交集 II
题目描述: 给定两个数组,编写一个函数来计算它们的交集. 示例 : 输入: nums1 = [,,,], nums2 = [,] 输出: [,] 示例 : 输入: nums1 = [,,], nums ...
- MySQL（九）插入、更新和删除
常用的SQL语句,除了select用于查询,还有insert.update.delete等. 一.insert insert:用来插入(或添加)行到数据库中,常见方式有以下几种: ①插入完整的行: ② ...
- (转)vim中多行注释
1.多行注释: 1. 首先按esc进入命令行模式下,按下Ctrl + v,进入列(也叫区块)模式; 2. 在行首使用上下键选择需要注释的多行; 3. 按下键盘(大写)“I”键,进入插入模式: ...
- GIT 分支管理：创建与合并分支、解决合并冲突
分支就是科幻电影里面的平行宇宙,当你正在电脑前努力学习Git的时候,另一个你正在另一个平行宇宙里努力学习SVN. 如果两个平行宇宙互不干扰,那对现在的你也没啥影响.不过,在某个时间点,两个平行宇宙合并 ...
- uboot-jiuding 下主Makefile详解
主Makefile位于uboot源码的根目录下,其内容主要结构为: 1. 确定版本号及主机信息(23至48行)2. 实现静默编译功能(48至55行)3. 设置各种路径(56至123行)4. 设置编译工 ...