媒体查询漫谈——@media Queries
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min
和max
用于表达”大于或等于”和”小与或等于”。如:width会有min-width
和max-width
媒体查询可以被用在CSS中的@media
和@import
规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。
media query能够获取的值有:
- 设备的宽和高device-width,device-heigth显示屏幕/触觉设备。
- 渲染窗口的宽和高width,heigth显示屏幕/触觉设备。
- 设备的手持方向,横向还是竖向orientation(portrait|lanscape)和打印机等。
- 画面比例aspect-ratio点阵打印机等。
- 设备比例device-aspect-ratio-点阵打印机等。
- 对象颜色或颜色列表color,color-index显示屏幕。
- 设备的分辨率resolution。
语法结构及用法:
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{rules} 在link中使用@media:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css" rel="external nofollow" />上面使用中only可省略,限定于计算机显示器,第一个条件max-width
是指渲染界面最大宽度,第二个条件max-device-width
是指设备最大宽度。 在样式表中内嵌@media:
@media (min-device-width:1024px) and (max-width:989px),screen and (max-device-width:480px),(max-device-width:480px) and (orientation:landscape),(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {rules} 在以上例子中,设置了电脑显示器分辨率(宽度)大于或等于1024px(并且最大可见宽度为989px);屏宽在480px及其以下手持设备;屏宽在480px以及横向(即480尺寸平行于地面)放置的手持设备;屏宽大于或等于480px小于1024px以及垂直放置设备的css样式。 从上面的例子可以看出,字符间以空格相连,选取条件包含在小括号内,rules
为兼容设置的样式表,包含在中括号里面。only
(限定某种设备,可省略),and
(逻辑与),not
(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。
可用设备名参数:
逻辑关键字:
可用设备名参数:
往往我们还有配合一些css的初始设置:
/* 禁用iPhone中Safari的字号自动调整 */ html {-webkit-text-size-adjust: none; } /* 设置HTML5元素为块 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } /* 设置图片视频等自适应调整 */ img {max-width: 100%;height: auto;width: auto\9; /* ie8 */ } .video embed, .video object, .video iframe {width: 100%;height: auto; }
一定记得在head标签中加上<meta name="viewport" content="width=device-width; initial-scale=1.0"> meta viewport
这个属性是在移动设备上设置原始大小显示和是否缩放的声明
参数设置∶
- width – viewport的宽度
- height – viewport的高度
- initial-scale – 初始的缩放比例
- minimum-scale – 允许用户缩放到的最小比例
- maximum-scale – 允许用户缩放到的最大比例
- user-scalable – 用户是否可以手动缩放
最后对于在IE浏览器中不支持media query
的情况,我们可以使用Media Query JavaScript
来解决,只需要在页面头部引用css3-mediaqueries.js
即可。示例:
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script> <![endif]--> 摘抄自觉唯网。
转载于:https://www.cnblogs.com/zyl-Tara/p/7268368.html
媒体查询漫谈——@media Queries相关推荐
- CSS:媒体查询 CSS3 Media Queries
定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
- html调用媒体图标,关于CSS 媒体查询(media queries)
传统的CSS只支持数量有限的设备显示规则,如:all.screen.print.handheld.television和projector.这些对于设备的尺寸.方向或分辨率没有任何的定论.CSS2.1 ...
- 媒体查询(-@media)的用法详解
媒体查询(-@media)的用法详解 媒体查询可以用来干什么? @media的作用:媒体查询可以在指定的设备上使用对应的样式替代原有的样式. 可以简单理解为:告诉浏览器,当满足某条件时,调用某样式.当 ...
- 媒体查询(Media Query)
媒体查询(Media Query)是CSS3新语法. 使用 @media查询,可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 媒体查询语法规范 用 @medi ...
- 边框样式(border-style)、边框圆角(border-radius)以及媒体查询(@media)
边框样式(border-style): border-style属性可以控制边框的视觉样式,包含8种可用边框样式. 使用方法: p {border-style: groove; } 8种样式: sol ...
- CSS3 媒体查询(media)与 Viewport
@media 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. 一.语法 1.样式表中的CSS媒体查询 @media mediatype and|not|only (media fe ...
- css 媒体查询问题 @media
// 小于等于 1366px 宽度的屏幕全都适应 @media only screen and (max-width: 1366px) {.div{ height: 14rem !important; ...
- vue手机适配媒体查询用法@media
注意: 每个像素阶段都已经上下连接成了,1200px~767px,最高到最低,每个阶段样式字体大小,布局等都可以写在里面,可以按f12,查看各个手机端样式变化~ 在index.html页面引入css文 ...
- CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
文章目录 媒体查询介绍 Media Queries具体使用 一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用 四.设备屏幕的输出宽度Device ...
最新文章
- android app 内置图标icon 的标准,(目前是2019年)
- 软件工程第二周阅读作业
- servlet配置web.xml问题
- 【2】基于zookeeper,quartz,rocketMQ实现集群化定时系统
- 自考计算机及应用心得体会,自考中文专业的心得体会
- 如何知道mysql的地址_如何知道自己的计算机上mysql的地址?
- __va_rounded_size
- torch tensor去掉1维_浑身是刺的“维c之王”,有人管它叫“菠萝”,有人管它叫“梨”...
- hdu 1856 并查集——ac的不一定正确
- bzoj 2820: YY的GCD(莫比乌斯反演)
- ld 命令看内存布局 汇编级调试
- php 添加数据sql语句,PHP添加/修改/删除SQL语句
- 路由交换技术-实验4:VLAN创建、划分、修剪及Trunk链路
- 亲生骨肉 窥视父母遗产 为了继承遗产竟用这种方式替代...
- 1060 5G/1065 版显卡安装TensorFlow/CUDA
- 使用 BEV 投影的高效城市规模点云分割
- python axis到底如何理解?
- 华硕主板橙色灯亮无法开机
- 5G+金融科技:万物互联下的智慧金融
- python查看显存占用情况以及使用numba.cuda释放显存
热门文章
- vb.net 当前计算机用户,用VB写的一个组件,实现添加系统用户,并添加到指定组-.NET教程,VB.Net语言...
- workbench应力应变曲线_说说真应力真应变
- 有关Run-Time Check Failure #2 - Stack around the variable 'XXX' was corrupted.错误的解决方法
- Java项目:角色权限后台脚手架系统(java+Springboot+Maven+myBaits-Plus+Vue+Element-UI+Mysql)
- 一些有趣的题目(java)持续更新
- mysql longtext可以存储多少文字_MySQL 四万字精华总结 + 面试100 问,和面试官扯皮绰绰有余(收藏系列)
- VUE input唤起键盘 底部固定的标签被顶上去解决办法
- 01-CoreData 概述
- 选择一个稳定、快速的服务器四大注意事项
- spring读取配置文件的几种方式