响应式web设计之@media
两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件:
1
|
< link rel = "stylesheet" type = "text/css" href = "styleA.css" media = "screen and (min-width: 400px)" > |
意思是当屏幕的宽度大于等于400px的时候,应用styleA.css
在media属性里:
- screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
- and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
- (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。
1
|
< link rel = "stylesheet" type = "text/css" href = "styleB.css" media = "screen and (min-width: 600px) and (max-width: 800px)" > |
意思是当屏幕的宽度大于600小于800时,应用styleB.css
另一种方式,即是直接写在<style>标签里:
1
2
3
4
5
|
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ .class { background: #ccc; } } |
写法是前面加@media,其它跟link里的media属性相同。
Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。
1
2
3
4
5
6
|
@media screen and (max-width: 600px) { .class { background: #fff; 你的样式 } } |
Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。
1
2
3
4
5
|
@media screen and (min-width: 900px) { .class { background: #fff; } } |
Multiple Media Queries
你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
1
2
3
4
5
|
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #fff; } } |
响应式web设计之@media的更多相关文章
- [转]响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
- 如何通过CSS3 实现响应式Web设计
如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...
- [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...
- css014 响应式web设计
css014 响应式web设计 一. 响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...
- CSS3-基于浮动的布局,响应式WEB设计,定位网页上的元素,设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- 响应式Web设计(Responsive Web design)
中文名 响应式Web设计 提出时间 2010年5月 英 文 Responsive Web design 解 释 一个网站能够兼容多个终端 目 的 解决移动互联网的浏览 优 点 ...
- 什么是响应式Web设计?怎样进行?
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 响应式WEB设计
近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...
- CSS响应式web设计
参考 1. 响应式web设计之CSS3 Media Queries http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html 2. 用 ...
随机推荐
- 如何确定拍照时,相机屏幕是横屏or竖屏?
http://www.eoeandroid.com/thread-80028-1-1.html TAG_DATETIME时间日期 TAG_FLASH闪光灯 TAG_GPS_LATITUDE纬度 TAG ...
- EF5+MVC4系列(7) 后台SelectListItem传值给前台显示Select下拉框;后台Action接收浏览器传值的4种方式; 后台Action向前台View视图传递数据的四种方式(ViewDate,TempDate,ViewBag,Model (实际是ViewDate.Model传值))
一:后台使用SelectListItem 传值给前台显示Select下拉框 我们先来看数据库的订单表,里面有3条订单,他们的用户id对应了 UserInfo用户表的数据,现在我们要做的是添加一个Ord ...
- [lua, mysql] 将多条记录数据组合成一条sql插入语句(for mysql)
-- 演示将多条记录数据组合成一条sql插入语句(for mysql) function getTpl0(tname) -- 获取表各个字段 local t = { tpl_pack = {" ...
- tf.variable_scope
转载:https://blog.csdn.net/gaoyueace/article/details/79079068 例如: #在名字为ae的命名空间内创建变量 with tf.variable_s ...
- cocos2d - 翻转两个Sprite
用两个图片初始化两个CCSprite,一样的大小,重叠在一起,分别叫做 foregroundNode 和 backgroundNode . - (void)flipover { if (isFlipi ...
- js(数组篇02)
原文:http://www.cnblogs.com/zaking/p/8686676.html 上一篇文章简单的介绍了一下js的类型,以及数组的增删方法.这一篇文章,我们一起来看看数组还有哪些用法,以 ...
- 安卓开发笔记——WebView组件
我们专业方向本是JAVA Web,这学期突然来了个手机App开发的课设,对于安卓这块,之前自学过一段时间,有些东西太久没用已经淡忘了 准备随笔记录些复习笔记,也当做温故知新吧~ 1.什么是WebVie ...
- [转]Linux内核源码详解--iostat
Linux内核源码详解——命令篇之iostat 转自:http://www.cnblogs.com/york-hust/p/4846497.html 本文主要分析了Linux的iostat命令的源码, ...
- Linux┊理解devfs、sysfs、udev、tmpfs等各种文件系统
https://www.cnblogs.com/yangliheng/p/6187193.html https://blog.csdn.net/qq258711519/article/details/ ...
- 安卓webview子线程网络请求,怎么获得结果?
向webview注入网络上的js,就需要请求js的url.但不允许在主线程直接发http请求,需要开子线程,开了子线程后,子线程就自己运行,主线程也自己运行,但是我的主线程需要子线程的结果才能继续往下 ...