【CSS3】Advanced11:Media Queries
1.Browser-size specific CSS
@media screen and (max/min-width:1000px){}
2.Orientation-specific CSS?
@media screen and(orientation landscape/portrait){}
3.Divice-specific CSS
@media handheld ——not be used widely
@media screen and (min-device-height: 768px) and (max-device-width: 1024px) {}
@media (device-pixel-ratio: 2) {}//iphone4 2 physical pixels to every CSS pixel
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
@media screen and (resolution: 326dpi(分辨率)) { /* */ }
@media screen and (min-resolution: 96dpi) { /* */ }
@media screen and (device-aspect-ratio: 16/9) { /* */ }
【CSS3】Advanced11:Media Queries的更多相关文章
- CSS3学习教程:Media Queries详解
说起CSS3的新特性,就不得不提到 Media Queries . Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
- 【CSS3】Advanced5:At Rules:@import, @media, and @font-face
1.@import bolt another stylesheet onto your existing one. @import url(**.css); must be placed at the ...
- 【CSS3】Advanced3:Universal, Child, and Adjacent Selectors
1.Universal selectors eg:#target*{ } 2.Child selectors < something immediately nested within some ...
- 【CSS3】Advanced10:Gradient
1.background:linear-gradient(20deg/(to) bottom right,orange,red,hsl(60,100%,50%)); 2.-webkit-chrome/ ...
- 【CSS3】Advanced9:Transformation
1.transform:rotate(-10deg) skew(20deg,10deg) scaling(2/1,2) translate/移动(100px,200px) 2.transform:ma ...
- 【CSS3】Advanced8:CSS Backgrounds: Multiples, Size, and Origin
1.Multiples,Size,and Origin eg:background-image:url(bg.png),url(bullet.png) 0 50% no-repeat,url(arro ...
- 【CSS3】Advanced7:CSS Transitions
1.animate parts of your design without the need for the likes of JavaScrip 2.allowing smooth animati ...
- 【CSS3】Advanced6:Attribute Selectors
1.with the attribute abbr[title]{color:red} 2.with the attribute and it's value input[type=text][dis ...
- 【CSS3】Advanced4:Advanced Colors
1.rgba(red,green,blue,alpha(不透明度0.0(完全透明)与 1.0(完全不透明)) 2.HSLa(hue(色调 0red 120green 240blue),saturati ...
随机推荐
- js中的referrer返回上一页使用介绍
js中的referrer的用法举例. js完整代码: <script language="javascript"> var refer=document.refer ...
- PHP — 用PHP实现一个双向队列
1.简介 deque,全名double-ended queue,是一种具有队列和栈的性质的数据结构.双端队列中的元素可以从两端弹出,其限定插入和删除操作在表的两端进行.双向队列(双端队列)就像是一个队 ...
- ora_reco_070361 hs message to agent event 等待事件
现象描述:oracle通过透明网关查询Teradata数据库的表突然变得很慢,小表可以查询出来,大表干脆就出不来. 分析过程: 1.网络可以ping通,小表可以过来,说明网络和网关都没有什么问题的. ...
- 【加密】RSA加密之算法
RSA公钥加密算法是1977年由Ron Rivest.Adi Shamirh和LenAdleman在(美国麻省理工学院)开发的. RSA算法是一种非对称密码算法,所谓非对称,就是指该算法需要一对密钥, ...
- WebService 学习过程
//------------------------------------------------------------------------------------------ //windo ...
- office2016 部分截图
哈啊哈哈啊哈 看看吧~~~~~~~~~~~~~~~~~
- python 读写文本文件
本人最近新学python ,用到文本文件的读取,经过一番研究,从网上查找资料,经过测试,总结了一下读取文本文件的方法. 1.在读取文本文件的时无非有两种方法: a.f=open('filename', ...
- 关于移动端和PC端的交互的区别
对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计 ...
- JS数据类型&&typeof&&其他
1. 5种基本数据类型: 1. String 2. Number 3. Boolean 4. Undefined 5. Null 2. 1种复杂数据类型:Object 3. 检测变量的数据类型:typ ...
- dorado7第一次使用感受
今天第一次玩dorado,说一下使用的感受 1.首先是优点: 首先是它的学习文档非常丰富,视频,PDF,PPT,实例,社区一应俱全 界面风格已经帮我们做完,无需担心界面美观的问题 与后台交互非常方便, ...