1.响应式Media(媒体查询器)

(1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css” /> 当页面宽度小于或等于600px,调用small.css   

转换成css3中的写法为:

@media screen and (max-width: 600px) {

选择器 {

属性:属性值;

}

}

就是将small.css文件的内容放在@media 里

(2)<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  /> 当页面宽度大于等于900px,调用big.css

@media sreen and (min-width: 900px) {

….

}

(3)多个Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

@media  (min-width:600px) and (max-width:900px) {

}

css3中Media标签的语法:

@media mediaType and|not|only (media feature) {
/*CSS-code*/
}

MediaType: (常用)

all : 用于所有设备

Print:用于打印机和打印预览

screen: 用于电脑屏幕,平板电脑,智能手机 (最常用)

speech: 应用于屏幕阅读器等发声设备

Media feature:(常用)

max-width: 定义输出设备中页面最大可见区域宽度

min-width: 定义设备中页面最小可见区域宽度

正式在项目中使用Media

在写media之前,首先设置好<meta>标签

(1)<meta name=“viewport” content=“width=device-width,initial-scale=1.0,user-scalable=no”  />

width=device-width : 宽度等于当前设备的宽度

Initial-scale: 初始的缩放比例 (默认1.0,不缩放)

User-scalable: 用户是否可以手动缩放

(2)因为IE8既不支持HTML5也不支持CSS3 @media ,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:

<!--[if lt IE 9]>

  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

(3)现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8 为了防止这种情况,我们需要下面这段代码来让IE的文档渲染模式永远都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,如果没有安装,就显示IE最新的渲染模式。

然后在项目中使用

$mobileWidth: calc(100% - 40px);  //手机屏幕两边各有20px的空白

@media

only screen and (max-width: $mobileWidth),

only screen and (max-device-width: 720px) {

注意下写的这个顺序,以免被覆盖样式:

用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面

@media (min-width: 768px){ //>=768的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 1200){ //>=1200的设备 }

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

H5小组合伙研究者咱们出一个新属性吧让他的width:100%;变得更强大,哥几个一拍巴掌合计着成就这样flex(伸缩盒)也横空出世了.

Flex:

设置父元素为display:flex;如果想设置元素的排列方向呢是自上而下还是自下而上呢是从左到右呢还是从右至左呢只需要设置属性flex-direction:row|column;flex-flow: flex-direction flex-wrap|initial|inherit;

CSS3 之 Media(媒体查询器)的更多相关文章

  1. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

  2. css3 media媒体查询器用法总结 兼容ie8以下的方法

    总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...

  3. css3 media媒体查询器用法总结(附js兼容方法)

    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...

  4. CSS3 media媒体查询器的使用方法

    最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...

  5. 控制页面打印的2种方法(css3的media媒体查询和window.print())

    在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...

  6. 总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。(转)

    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie-->< ...

  7. css3的@media媒体查询

    css3新功能,根据屏幕大小进行识别. 参考: http://www.runoob.com/cssref/css3-pr-mediaquery.html

  8. CSS3@media媒体查询

    CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...

  9. CSS Media媒体查询使用大全,完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

随机推荐

  1. Java中String类常用方法(字符串中的子字符串的个数)

    重点内容 4种方法: 1.int indexOf(String str)返回第一次出现的指定子字符串在此字符串中的索引. 2.int indexOf(String str, int startInde ...

  2. git教程:管理修改

    转载:管理修改 现在,假定你已经完全掌握了暂存区的概念.下面,我们要讨论的就是,为什么Git比其他版本控制系统设计得优秀,因为Git跟踪并管理的是修改,而非文件. 你会问,什么是修改?比如你新增了一行 ...

  3. qt 利用 HTML 生成PDF文档,不能显示jpg图片

    利用 QPrinter 和html 生成 pdf文档 其中用html语句有显示图片的语句 但只能显示png格式的图片,不能显示jpg格式图片. 经过排查:语法,文件路径等都正确,最终在stack ov ...

  4. 推荐一个免费的在线IDE和终端

    墙裂推荐!支持众多语言,方便学习,测试,地址如下 https://www.tutorialspoint.com/codingground.htm

  5. jmeter 获取登录token

    1.在登录的请求下新建正则表达式,获取token 2.正则表达式的写法 注意:apply to 默认是选择第二个,但是有获取不到token的情况就选第一个 "accessToken" ...

  6. scrapy基本使用

    Scrapy笔记 安装scrapy框架 安装scrapy: 通过pip install scrapy 如果是在Windows上面,还需要安装pypiwin32,如果不安装,那么以后运行scrapy项目 ...

  7. 基于C++的成功-失败法演示

    确定搜索区间的一维搜索算法 求多元函数 f(x) 的最优解通常采用迭代的方法: 在可行域内任取一点 x0作为初始点,从 x0 出发,按照一定的方法,一次找到 x1,x2,x3,…,xn,…, 使得某个 ...

  8. docker hub切换国内镜像

    官方docker hub访问非常的慢,安装之后最好先切换国内镜像: 执行: curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh ...

  9. mysql trigger 备忘

    最近用mysql有这么一个需求 item表:id,item,url,websiteid website表:id,domain item表示从不同网站获取的信息 website表示获得信息的网站,其中的 ...

  10. VUE路由携带参数的三种方式

    vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...