css3 -- 媒体查询
媒体查询:
1、媒体查询优点:基于设备的属性检测设备,这样一来就不需要使用浏览器探测脚本,之后允许直接安装设备的功能去设定目标样式表,也就是说检测用户使用小屏幕的设备,css规则就会调整以适应该屏幕的尺寸,从屏幕上去除无关元素,提供更小的图片,让文本变得更加清晰
2、语法
@link元素调用,多种媒体选择中间用逗号隔开
<link href="" rel="stylesheet" media="logic media and (expression)" >
<link href="" rel="stylesheet" media="srceen,projection" >
@import指令调用
@import url("file") logic media and (expression)
@在样式表中或style元素中添加
@media logic media and (expression){
rules
}
3、媒体特征
@样式
@media screen (min-width:400px){
h1{
background:
}
}
@设备宽度以及高度
@media media and (device-width:1024px) {rules}
@media media and (max-device-width:1024px) {rules}
@media media and (min-device-width:1024px) {rules}
@方向
@media media and (orientation:landscape/portrait){rules}
@高宽比
@media media and (aspect-ratio:horizontal/vertical){rules}
@media media and (device-aspect-ratio:horizontal/vertical){rules}
@像素比
@media media and (-webkit-device-pixel-ratio : number){rules}
@media media and (-moz-device-pixel-ratio : number){rules}
@media media and (max--moz-device-pixel-ratio : number){rules}
@media media and (min--moz-device-pixel-ratio : number){rules}
css3 -- 媒体查询的更多相关文章
- CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...
- iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
- iPhone6的CSS3媒体查询
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : po ...
- CSS3媒体查询使用小结
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...
- CSS3媒体查询
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- CSS3媒体查询总结
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- css3 媒体查询的学习。
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- Html5 @media + css3 媒体查询
css3 media媒体查询器用法总结 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...
- css3媒体查询实现网站响应式布局
最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...
- 关于css3媒体查询和响应式布局
响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...
随机推荐
- 【jquery】字符ascii码转换函数
js 字符ascii码转换函数 字符转ascii码:用charCodeAt();ascii码砖字符:用fromCharCode(); 看一个小例子 <script> str="A ...
- Rsync+lsync实现触发式实时同步
使用rsync+lsync实现触发式实时同步 服务器信息 centos6.5 主:192.168.5.4 搭建lsync 从:192.168.5.3 搭建rsync 1.1 从服务器设置 # yum ...
- 使用rdesktop连接Windows远程桌面
rdesktop 使用简单,windows也不和装什么服务端,是要把远程桌面共享打开就行了 安装 yum -y install rdesktop 具体使用方法要先打开终端,然后输入以下命令: rdes ...
- 更新补丁Bind
1.查询补丁版本信息 (1) rpm -qa|grep bind (2) dig @localhost version.bind 2.下载安装 BIND最新漏洞和升级解决办法 现在有非常多的公司的都有 ...
- js方法类库封装的简易示例
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></s ...
- linux初体验
linux系统和window一样,也是一套独立的操作系统,它只是没有图形化界面而已
- mysql 得到重复的记录
select devicetoken from client_user group by devicetoken having count(devicetoken)>1
- java Unicode、ISO-8859-1、GBK、UTF-8编码转换深入浅出
参考文献:搞懂ASCII, ISO8859-1, ANSI和Unicode Unicode百度文献 ISO-8859-1百度文献 注: 1.utf-8虽然是国际编码,对不同范围的字符使用不同长度的编码 ...
- nyoj998(euler)
题意:题意:给出n和m,求满足条件gcd(x, n)>=m的x的gcd(x, n)的和,其中1<=x<=n,1<= n, m <= 1e9:思路:此题和nyoj1007差 ...
- 三、jQuery--Ajax基础--Ajax全接触--JSON
JSON基本概念 JSON:JavaScript对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法,类似XML.它采用键值对的方式来组织,易于人们阅 ...