media jquery 响应页面尺寸

发布时间:2020-04-05 13:27:27 作者:Ansue
阅读:255
前端开发者专用服务器,限时0元免费领! 查看>>

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 */}

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:
  1. CSS3中的media媒体查询
  2. css中@media属性如何使用

开发者交流群:

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

iphone media jquery

上一篇:MySQL+MMM 高可用集群部署(一)

下一篇:python中的三元表达式,列表解析 和 生成器表达式

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
开发者交流群×