CSS3 media 入门
css3 media 严格来说是自适应布局 对不同的屏幕(正确的说应该是
)
写不同的css样式。而流式布局 则才算是响应式布局。
css3 media 语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
在这之前一直对媒体查询有两个关键词min-width和max-width,模糊今天特意梳理下。
width：
width: 通常指代视口宽度；另外width和device width的区别在于，device width指代是屏幕的物理宽度。
比如iphone5的屏幕分辨率是1136×，竖屏时device width是640，
横屏时是1136。通常，移动设备的浏览器都是全屏的，所以一般情况下width等于device-width。
但是height和device-height的情况不一样（浏览器上方的地址栏和下方的工具栏有可能不算进视口高度）
。鉴于一般媒体查询不采用height，所以本文所有例子全部使用width，指代width的像素
/*width大于或者等于min-width 600px*/
@media screen and (min-width: 600px) {
.....
}
/*如果width小于或者等于500px，采用 的样式*/
@media screen and (max-width: 500px) {
.....
}
/*如果width在700px和900px之间*/
@media only screen and (min-width: 700px) and (max-width: 900px) {
.....
}
demo:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
background-color:red;
}
/*如果width小于或者等于500px，采用 的样式*/
@media screen and (max-width: 500px) {
body {
background-color: lightgreen;
}
}
/*width大于或者等于min-width 600px*/
@media screen and (min-width: 600px) {
body {
background-color: yellow;
}
}
/*如果width在700px和900px之间*/
@media only screen and (min-width: 700px) and (max-width: 900px) {
body{
background-color: blue;
}
} </style>
</head>
<body> </body>
</html>
body默认红色 当html宽度小于500px 背景颜色 浅绿色 、当宽度大于600 黄色、当宽度在700-900直接 绿色
参考文档
https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
CSS3 media 入门的更多相关文章
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- CSS3基础入门02
CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...
- [转]响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
- 【CSS】CSS3从入门到深入（复习查漏向
CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- 使用CSS3 Media Queries实现网页自适应
原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不 ...
- [转]CSS3 Media Query实现响应布局
讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...
- CSS3 Media Queries 片段
CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
随机推荐
- PPS传奇生死
地址 :http://game.pps.tv/events/cqss_sign 调用encryptedString('password') RSA加密,通过function(a) 定义 window= ...
- 【转】iOS动态库和静态库的简要介绍
静态库与动态库的区别 首先来看什么是库,库(Library)说白了就是一段编译好的二进制代码,加上头文件就可以供别人使用. 什么时候我们会用到库呢?一种情况是某些代码需要给别人使用,但是我们不希望别人 ...
- 走进AngularJs 表单及表单验证
年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...
- 报错：MySQL check the manual that corresponds to your MySQL server version for the right syntax
今天在向MySQL中插入数据时,报了标题的错误,因为我用的是session.save(object)方法,后台打印出的object和sql语句都没有问题,后来在网上查询,发现http://blog.c ...
- cocos2dx-lua_修改源码流程（cocos2dx-3.10、win7、Cocos Code IDE1.2）
以下是在cocos2dx-3.10.win7.Cocos Code IDE1.2下假定你已经配置好了cocos2dx的环境.1.修改源代码步骤(1)在Cocos/Cocos2d-x/cocos2d-x ...
- VirtualBox内ubuntu10.10系统和windows7 共享文件夹
材料 virtualbox 4.3.0 ubuntu10.10 window 7 sp1 步骤 1.安装好虚拟机和操作系统,(具体步骤网上有很多) 2.安装虚拟机的增强功能包, 安装完成手动系统重新, ...
- py-faster-rcnn之python引入_caffe.so
本文并不给出"编写一个c++代码,然后编译为.so文件,然后在python中引入"的hello world,需要的请参考:http://www.oschina.net/questi ...
- Codeforces 710F String Set Quries
题意 维护一个字符串的集合\(D\), 支持3种操作: 插入一个字符串\(s\) 删除一个字符串\(s\) 查询一个字符串\(s\)在\(D\)中作为子串出现的次数 强制在线 解法 AC自动机+二进制 ...
- AnjularJS系列1 —— 样式相关的指令
最近,开始学习AngularJS. 开始记录学习AngularJS的过程,从一些很简单的知识点开始. 习惯先从实际应用的指令开始,再从应用中去体会AngularJS的优缺点.使用的场景等. 之前一直希 ...
- ThinkPhp 3.2 ajax无刷新分页（未完全改完，临时凑合着用）
临时更改后的page类(很多地方没修改...因为笔者PHP没学好..)如下: <?phpnamespace Fenye\libs; /** file: page.class.php 完美分 ...