使用media query 来实现响应式设计
你的网页在手机上显示效果可以在电脑上一样好看。完成这个任务的奥秘被称为响应式设计,媒体查询(media query)是实现网页响应的关键。
在电脑上一个例子:
<div class="row">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
css样式:
.row{
width:100%;
}
.span{
width:300px;
float:left;
margin-left:30px;
}
这个在电脑上显示,是正常的,在一定设备上布局并不是我们期望的。
Media query
在css外部设置应用相应样式的条件。有一些特征可以用来决定是否应用哪些样式。下面这些是其中重要的部分:
. width
. height
. device width
. device height
. resolution
. orientation
. aspect ratio
通过设备宽度来决定使用什么样式。下面相应的规则。
@media(max-width:500px)
如果规定屏幕宽度小于500px 的时候使用css样式。这个样式条件为true,才会引用。
有三种不同方式来应用这个条件规则:
1、<link> tag
如下 :<lin rel ="stylesheel" type="text/css" media="screen and(max-width:500px)" href="test.css">
2、media condition
一块css代码可以用花括号包围起来,css定义只有当media query 满足下面条件的时候才有效:
@media screen and(max-width:500px){ .row{ width:100%; } .span{ width:auto;
float:left;
margin:;
}
}
3、import condition
一个引用只有在media query 条件满足的时候才回将外部css导入。在外部文件里定义的css样式只有条件被满足的时候才会有效。
@import url("test.css") screen and(max-width:500px);
我们可以使用media query 来改变页面的布局,但是使用它们做类似条件css定义也是可以的。我们经常通过改变字体大小、图片质量、空白等其他元素
来更好的适应不同类型的设备。
使用media query 来实现响应式设计的更多相关文章
- 响应式设计的思考:媒体查询(media query)
Jason Grigsby发表了篇文章,<CSS Media Query for Mobile is Fool’s Gold>对媒体查询(media query)吐槽,大意是在移动设备上使 ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- 第一章 响应式设计之Media Quer
书里谈到尽量不要使用Media Queriy. 但是过多使用media query,会导致CSS变得脆弱和页面难以维护.一些方法可以减少页面使用 media query. 响应式设计: (1) 使用百 ...
- 前端响应式设计中@media等的相关运用
现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...
- paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54
paip.自适应网页设计 跟 响应式 设计方法与工具补充(2)o54 #-----响应式 设计框架 Bootstrap比较热门. Foundation 号称是世界上最先进的响应式前端框架. #---绝 ...
- paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结
paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...
- 超棒的响应式设计测试书签和工具(bookmarks)(转)
一.测试书签(bookmarks) Viewport Resizer 这个书签号称拥有158个国家3万多活跃的用户,主要特性: 完全自定制 方便的添加自定义尺寸 手动的横竖屏切换 自动的横竖屏切换 ( ...
- 响应式设计:理解设备像素,CSS像素和屏幕分辨率
概述 屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的 ...
- CSS3知识点整理(五)----响应式设计及其他属性
介绍Media Queries与Responsive设计以及外轮廓属性.resize属性.CSS3生成内容等 学会如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺 ...
随机推荐
- yii2常用excel操作库
yii2使用较多的excel操作库 1."phpoffice/phpexcel" https://github.com/PHPOffice/PHPExcel/archive/1.8 ...
- 【Arcgis for android】保存地图截图到sd卡
关键词:arcgis for android ,截图,bitmap,sd卡 参考文章:http://blog.csdn.net/wozaifeiyang0/article/details/767972 ...
- SQLServer存储引擎——03.日志
3. SQLServer存储引擎之日志篇 (3.1)日志结构 (3.1.1)物理日志 (0)物理日志即数据库的.ldf文件, 当然后缀名是可以自定义的,默认是.ldf (1)一个SqlServer数据 ...
- 动态变更GridView控件列名
近段时间,确是很多专案要写,客户的个性化要求也越来越多.举个例子吧,就是从数据库取出来的字段名,在显示在GridView时,需要全部更为另外一个名称.下面的样例,并非是专案的内容,而是Insus.NE ...
- myql 服务启动不了怎么办
今天,不小心手动将mysql 服务停掉后,怎么也启动不了,后面查了半天 ,终于知道要先将任务管理器里的mysql.exe 先Kill掉,然后可以启动了,记录一下
- CHUI类
自定义控件程序运行流程 setNeedsLayOut和setNeedsDisplay区别 masonry使用技巧 1.普通展示 UILabel UIView UI控件的位置 U ...
- 5、OpenCV Python ROI和泛洪填充
__author__ = "WSX" import cv2 as cv import numpy as np #泛洪填充 从一个点开始 ,填充周围和他相似的点,直到遇到一个边界 # ...
- ios对new Date() 的兼容问题
移动开发的一个小坑 我们一般这样创建一个日期变量 var d = new Date("2017-08-11 12:00:00"); 但是在ios上却是返回 invalid Date ...
- wordpress显示FTP上传
在开始添加的配置文件里添加以下内容 define("FS_METHOD","direct"); define("FS_CHMOD_DIR", ...
- Exadata扩展
所谓Exadata扩展,也即向现有的Exadata环境中增加新的数据库服务器或存储服务器. 扩展原则 可以依循以下规则扩展Exadata: (1).可以将Exadata从某种固定配置扩展到另一种固定配 ...