css3响应式布局设计——回顾
响应式设计是在不同设备下分辨率不同显示的样式就不同。
media 属性用于为不同的媒体类型规定不同的样式。根绝浏览器的宽度和高度重新渲染页面。
语法: @media mediatype and | not | only (media feature) {}
示例:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
结果: 分辨率在大到600的时候 显示这个样式表里面的样式。
媒体类型:
all 用于所有设备
print 用于打印机和打印设备
screen 用于电脑屏幕,平板电脑,智能手机。
speech 用于阅读器等发声设备
关键字:
and 运算符用于符号两边规则均满足条件则匹配。
@media screen and (max-width : 600px) {
/*匹配宽度小于600px的电脑屏幕*/
}
not关键字是用来排除某种制度的媒体类型。
@media not print {
/*匹配除了打印机以外的所有设备*/
}
only 用来定某种特定的媒体类型。
@media only screen and (min-width:300) and (max-width:500){
/*这段是只(only)针对彩色屏幕设备*/
}
媒体特性: (常用的)
max-width(max-height): 最大宽度和最大高度
@media (max-width: 600px) {
匹配界面宽度小于600px的设备
}
min-width(min-height) : 最小宽度和高度
@media (min-width : 400px) {
匹配界面宽度大于400px的设备
}
max-device-width(max-device-height) 设备的最大宽度和高度
@media (max-device-width: 800px) {
匹配设备(不是界面)宽度小于800px的设备
}
min-device-width(min-device-height): 设备的最大宽度和高度
@media (min-device-width: 600px) {
匹配设备(不是界面)宽度大于600px的设备
}
orientation: portrait 竖屏
<link rel="stylesheet" media="all and
(orientation:portrait)"
href="indexa.css"/>
结果: 在竖屏下显示这样式
orientation:landscape 横屏
<link rel="stylesheet" media="all and
(orientation:landscape)"
href="indexa.css"/>
结果: 在横屏下显示这样式
css3响应式布局设计——回顾的更多相关文章
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- html5 + css3 + jQuery + 响应式布局设计
1. [代码][HTML]代码 <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...
- <HTML5和CSS3响应式WEB设计指南>译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...
- CSS3–2.css3 响应式布局
1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...
- WinForm响应式布局设计实践
引言 创建响应式WinForm应用程序并不那么简单. 响应式布局,在此我指的是应用程序在不同屏幕分辨率下的可用性. 对于WinForm应用程序,我们需要明确地根据分辨率来调整控件的大小和重新定位. 虽 ...
- CSS3–2.css3 响应式布局
1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...
- css3响应式布局
响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏) <style> .wrap {width: 900px; border: 1 ...
- CSS3 响应式布局: @media (min/max-width:***) @font-face
响应式布局 responsive design @media 属性 bootstrap css 分析: @media (min-width:768px){ body{***} } use @medi ...
- css3 响应式布局 Media Query
1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...
随机推荐
- git获取别人远程dev分支上的代码
我们在使用 git clone xxx.git 下载代码的时候,获取到的只是 master上的代码 假入有个 dev 分支我们想获取上面的代码怎么办! #下载dev分支上的代码并切换到dev分支 g ...
- mvc中RedirectToAction()如何传参?
今天在做一个功能的时,使用RedirectToAction()需要从这里传几个参数,从网上查了一下,这样解决.真好. Return RedirectToAction("Index" ...
- 2017年9月22日 关于JS数组
JS数组 JS数组的定义方法 var arr = []; var arr = new Array() JS数组属性 长度 arr.length 遍历数组 索引值:从0开始数 第一种方法 for(var ...
- select, poll, epoll笔记
看网络通信框架,netty, thrift,java nio等,最后都会通过select, poll, epoll或者socket等进行通信.查了些网页,总结一下.做个笔记 1. Socket单线程阻 ...
- 进程 multiprocessing详解
一 ,核心 就是像线程一样管理进程 ,类似于threading ,cup利用率较好,该模块用来跨平台的多进程模块,含有一个Process 类代表进程对象,start() 启动进程 Process语法结 ...
- HashMap和Hashtable的比较
相同点 HashMap和Hashtable都是存储“键值对(key-value)”的散列表,而且都是采用拉链法解决hash冲突的.但是1.8中,hashmap引入了红黑树.Hashtable没有引入红 ...
- OLEDB 数据变更通知
除了之前介绍的接口,OLEDB还定义了其他一些支持回调的接口,可以异步操作OLEDB对象或者得到一些重要的事件通知,从而使应用程序有机会进行一些必要的处理.其中较有用的就是结果集对象的变更通知接口.通 ...
- Web前端面试指导(七):入职后的建议
7.2 关于合同 签合同的时候,看公司要求,有些是3年,有些是5年,不要怕,签了就是了,真到想走的时候,提前说一声,随时可以走,不存在什么违约赔偿. 注意:你的合同和薪资都是属于保密的,不能让公司其他 ...
- iDempiere 使用指南 库存出入库研究
Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...
- 【起航计划 036】2015 起航计划 Android APIDemo的魔鬼步伐 35 App->Service->Messenger Service Messenger实现进程间通信
前面LocalService 主要是提供同一Application中组件来使用,如果希望支持不同应用或进程使用Service.可以通过Messenger.使用Messgener可以用来支持进程间通信而 ...