media jquery 响应页面尺寸

简介:

device-pixel-ratio:定义输入设备屏幕的可视宽度与可见高度比率。device-width:输入设备屏幕的可视宽度。

device-width:输入设备屏幕的可视宽度。

orientation :屏幕横竖屏定向。landscape 是横向,portrait 是纵向【ipad 相反】


/* iPhone 4 ———– */

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {/* Styles */}


/* iPads (portrait) ———– */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {/* Styles */}


/* Smartphones (portrait and landscape) ———– */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

/* Styles*/}


/* Smartphones (landscape) ——— */

@media only screen and (min-width : 321px) {/* Styles */}


/* Smartphones (portrait) ———– */

@media only screen and (max-width : 320px) {/* Styles */}


/* iPads (portrait and landscape) ———– */

@media only screen and (min-device-width : 768px)and (max-device-width : 1024px) {

/* Styles */}


/* iPads (landscape) ———– */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)

 and (orientation : landscape) {/* Styles */}


/* iPads (portrait) ———– */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)

and (orientation : portrait) {/* Styles */}


/* Desktops and laptops ———– */

@media only screenand (min-width : 1224px) {/* Styles */}


/* Large screens ———– */

@media only screen and (min-width : 1824px) {/* Styles */}





      本文转自Ansue  51CTO博客,原文链接:http://blog.51cto.com/ansue/1619034,如需转载请自行联系原作者



相关文章
|
12月前
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
80 0
|
12月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
80 0
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
58 0
|
JSON JavaScript 数据格式
jQuery操作页面元素属性和内容
jQuery操作页面元素属性和内容
55 0
|
2月前
|
JavaScript
jQuery 尺寸
jQuery 尺寸
11 2
jQuery 尺寸
|
2月前
|
JavaScript
jQuery 尺寸
jQuery 尺寸
13 1
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
34 2
|
3月前
|
Web App开发 JavaScript Android开发
重载jquery on方法实现click事件在移动端的快速响应
重载jquery on方法实现click事件在移动端的快速响应
|
4月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
3月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
32 0