媒体查询之一物理像素的设置
2017-08-08 18:24
218 查看
响应式布局
响应式布局媒体查询
媒体查询的应用一物理像素
媒体查询
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式,使页面在不同在终端设备下达到不同的渲染效果;@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的;
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面;
媒体查询的语法:
@media 媒体类型 and (媒体特性){包含正常的css样式内容}; @media only 媒体类型 and (媒体特性){}
示例:
@media only tv{ #test{ background: yellow; } }
使用媒体查询必须要使用“@media”开头,然后指定媒体类型(也可以称为设备类型),随后是指定媒体特性(也可以称之为设备特性);
媒体特性的书写方式和样式的书写方式非常相似,主要分为两个部分,第一个部分指的是媒体特性,第二部分为媒体特性所指定的值,而且这两个部分之间使用冒号分隔;
但与CSS属性不同的是,媒体特性是通过min/max来表示大于等于或小于做为逻辑判断,而不是使用小于(<)和大于(>)这样的符号来判断。
媒体类型
all,用于所有设备
print,用于打印机和打印预览
screen,用于电脑屏幕,平板电脑,智能手机等。
speech,应用于屏幕阅读器等发声设备
媒体特性
width:当前的宽度等于某个值时,样式生效;
min-width:最小宽度,指的是媒体类型大于或等于指定宽度时,样式生效;
max-width:最大宽度,是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。
//意思:当屏幕宽度小于200px时,执行代码块中的逻辑; @media only screen and (max-width:200px ){ #test{ background: yellow; } }
关键字
and关键词,用于合并多个媒体属性或合并媒体属性与媒体类型。
not关键词,使用关键词“not”是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。换句话说,not关键词表示对后面的表达式执行取反操作。
only关键词,用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。
媒体查询的应用:一物理像素
需求:设计出一物理像素的边框,适用于像素密度比为2,或者像素密度比为3的屏幕;html框架:
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> <link rel="stylesheet" type="text/css" href="css/mixin.css"/> <title></title> </head> <body> <div id="wrap"> </div> </body> </html>
less文件:只写出上边框,下边框同理
*{ margin: 0; padding: 0; } //设置公共混入样式 .onePX(@_,@bgc:black){ position: relative; &:before{ position: absolute; content: ""; display: block; width: 100%; height: 1px; //使用媒体查询,进行像素比2和3的屏幕适配。 @media only screen and (-webkit-min-device-pixel-ratio:2){ transform: scaleY(.5); } @media only screen and (-webkit-min-device-pixel-ratio:3){ transform: scaleY(.3333333); } } } .onePX(top,@bgc:black){ &:before{ background-color: @bgc; top: 0; } } #wrap{ width: 100px; height: 100px; background-color: pink; .onePX(top,red) }
css文件
* { margin: 0; padding: 0; } #wrap { width: 100px; height: 100px; background-color: pink; position: relative; } #wrap:before { position: absolute; content: ""; display: block; width: 100%; height: 1px; } @media only screen and (-webkit-min-device-pixel-ratio: 2) { #wrap:before { transform: scaleY(0.5); } } @media only screen and (-webkit-min-device-pixel-ratio: 3) { #wrap:before { transform: scaleY(0.3333333); } } #wrap:before { background-color: #ff0000; top: 0; }
相关文章推荐
- 媒体查询之一物理像素的设置
- 媒体查询之一物理像素的设置
- 媒体查询之一物理像素的设置
- 媒体查询之一物理像素的设置
- 媒体查询之一物理像素的设置
- 媒体查询之一物理像素的设置
- 报错解决/简单媒体查询/动态加载css/横竖屏判断/html浏览器兼容性meta设置等小问题小知识
- CSS自适应网站布局媒体查询如何设置断点
- @media 媒体查询 479尺寸下一般手机的设置
- 此像素非彼像素(viewport与苹果的变化)css媒体查询-width与device-width的区别
- 移动端一物理像素边框的设置
- 媒体查询使用和设备像素比
- 响应式布局与媒体查询,以及像素以及查看各种分辨率下显示效果的工具
- 网站媒体查询设置
- 媒体查询响应式布局
- 媒体评价系统报表查询
- hibernate HQL查询参数设置
- IIS7多域名绑定同一物理目录,设置不同默认文档的解决方案
- ORACLE新建表,删除表,设置主键,查询的简单例子
- 媒体查询