您的位置：首页 > 其它

媒体查询之一物理像素的设置

2017-08-08 18:24 288 查看

响应式布局

媒体查询

使用 @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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航