利用@media与@media screen进行响应式布局
了解Media Queries
Media Queries,其作用就是允许添加表达式用以媒体查询,以此来选择不同的样式表,从而自动适应不同的屏幕分辨率。
css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS,我们不去讨论。
css3的@media属性在CSS3里面已经演变成一种 media queries(媒体查询/匹配)了,在CSS3里面,可以用查询语句来匹配各种类型的屏幕。
@media与@media screen区别
@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media ,否则,就用@media screen。
不过这只是笼统的做法,其实如果把“screen”换为“print”,写为@media print,那么该css就可用到打印设备上了,但要注意,@media print声明的css只能在打印设备上有效。
Media Queries工作方式:
在media属性里:
- ● screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
- ● and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
- ● (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。完整的特性参看 相关的Media features部分
1、种是直接在link中判断设备的尺寸,然后引用不同的css文件:
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
意思是当屏幕的宽度大于等于400px的时候,应用styleA.css
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于600小于800时,应用styleB.css
2、另一种方式,即是直接写在 style 标签里:
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
.class {
background: #ccc;
}
}
写法是前面加@media,其它跟link里的media属性相同。
Media使用说明举例
1、前端响应式布局最出名的框架莫过于 Bootstrap
下面我们看看min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600 480的,哪些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢,那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768,这里有等于,所以我们判断更小的设备用@media (max-width: 767px)这边表示<=767就不会有冲突了。
/* 小屏幕(平板,大于等于 768px) */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕(桌面显示器,大于等于 992px) */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕(大桌面显示器,大于等于 1200px) */
@media (min-width: @screen-lg-min) { ... }
2、自适应代码
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序,如果你把@media (min-width: 768px)写在了下面那么就是错误的!!!
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
3、高级的混合应用
@media screen and (min-width:1200px){}
@media screen and (min-width: 960px) and (max-width: 1199px) { }
@media screen and (min-width: 768px) and (max-width: 959px) { }
@media only screen and (min-width: 480px) and (max-width: 767px){ }
@media only screen and (max-width: 479px) { }
/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }
基于视窗宽度的媒体查询断点设置
前提设置body的字体为100%。其具有一个简单的计算公式:100% = 16px = 1em = 14pt
/*Viewport = 1920px*/
@media screen and (max-width: 120em){}
/*Viewport = 1680px*/
@media screen and (max-width: 105em){}
/*Viewport = 1400px*/
@media screen and (max-width: 87.5em){}
/*Viewport = 1200px*/
@media screen and (max-width: 75em){}
/*Viewport = 1024px*/
@media screen and (max-width: 64em){}
/*Viewport = 960px*/
@media screen and (max-width: 60em){}
/*Viewport = 800px*/
@media screen and (max-width : 50em){}
/*Viewport = 768px*/
@media screen and (max-width : 48em){}
/*Viewport = 600px*/
@media screen and (max-width: 37.5em){}
/*Viewport = 480px*/
@media screen and (max-width: 30em){}
/*Viewport = 320px*/
@media screen and (max-width: 20em){}
/*Viewport = 240px*/
@media screen and (max-width: 15em){}
/*
High Resolution/Retina Display Media Queries
*/
/*Pixel Density 3*/
@media(-webkit-min-device-pixel-ratio: 3),(min-resolution: 192dpi){}
/*Pixel Density 2*/
@media(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){}
/*Pixel Density 1.5*/
@media(-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 124.8dpi){}
/*Pixel Density 1.25*/
@media(-webkit-min-device-pixel-ratio: 1.25),(min-resolution: 120dpi){}
/*
Printed Style Media Queries
*/
/*Print Resolution 300 dpi*/
@media print and (min-resolution: 300dpi){}
/*Print Resolution 144 dpi*/
@media print and (min-resolution:144dpi){}
/*Print Resolution 96 dpi*/
@media print and (min-resolution:96dpi){}
/*Print Resolution 72 dpi*/
@media print and (resolution:72dpi){}
利用@media与@media screen进行响应式布局相关推荐
- three - 3 - 基础知识(1. three渲染结构,2.对canvas 进行响应式布局,3.让canvas 画布自适应设备分辨率 )
本章节分为3点: 理解three.js 的渲染结构 对canvas 进行响应式布局 让canvas 画布自适应设备分辨率 canvas 画布的css尺寸和像素尺寸 1.three.js 的渲染结构 接 ...
- CSS3 @media 查询(制作响应式布局)
这里简单说明一下@media 查询. 详细说明文档:http://www.runoob.com/cssref/css3-pr-mediaquery.html 使用 @media 查询,你可以针对不同的 ...
- 使用BootStrap进行响应式布局案例
(1)首先下载BootStrap,把bootstrap.min.css拷贝到项目中. (2)新建style.css,实现代码如下: .row{margin-bottom: 20px;}.row .ro ...
- html怎么做成响应式的,怎么用html5完成响应式布局?
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
- web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
- bootstrap响应式布局之阿里百秀
响应式布局 移动端布局技术选型 -流式布局(百分比布局) -flex弹性布局 -rem适配布局 -响应式布局 响应式就是页面布局会随着屏幕大小变化响应,做出不同的布局模式. 相应不同设备(手机,PAD ...
- 前端响应式布局原理与方案(详细版)
引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局.传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重.下面是博客网站对不同设备适配后的结 ...
- java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
- 媒体查询-响应式布局-BFC
媒体查询-响应式布局-BFC 1 回顾 1.1 多列布局 设置给包裹元素的属性:column-countcolumn-widthcolumnscolumn-gapcolumn-rule-widthco ...
- 如何实现响应式布局?
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布 ...
最新文章
- element vue 动态单选_软件更新丨vue-element-admin 4.0.0 beta 发布,后台集成方案
- leetcode 102.二叉树的层序遍历
- 将表达式转换成逆波兰式
- C++重载一些需要注意的地方
- Java 8的默认方法:可以做什么和不能做什么?
- GTJ2018如何导出全部工程量_如何成为优秀的造价员?广联达编制内刊手册,造价员算量高手秘籍...
- 前端学习(1869)vue之电商管理系统电商系统之配置axios发出登录请求
- Linux绘图函数与驱动,Linux中与驱动相关的ioctl函数
- java url headers,Java CloseableHttpResponse.getHeaders方法代码示例
- Ubuntu nginx+uwsgi部署Django项目
- matlab 电力系统分析 毕设,基于MATLAB的P-Q分解法电力系统潮流计算毕业设计
- 每天学点Shiro-say hello
- qt.qpa.xcb: could not connect to display解决
- w7系统您的计算机无法启动,Windows7旗舰版启动不了怎么办?电脑无法正常启动Windows7解决方法...
- Java核心技术整理(九)---持久层、业务层、表现层
- 图片还原去遮挡_怎么去马赛克 还原图片去掉遮挡软件
- 一文看懂WebRTC媒体服务器
- 双模控制器很耗电_电动车双电双核控制系统是在说什么?这个部件的发展一日千里!...
- E.03.10 Coffee Drinking Tied to Lower Risk of Heart Failure
- available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: