星空网 > 软件开发 > 网页设计

一些实用的CSS Media Query代码片段,个人采集

CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果。

以下是一些CSS media queries代码片段,你可以添加在自己的项目中,让页面根据屏幕自适应:

iPhone5

Css代码

  1. @media screen and (device-aspect-ratio: 40/71) {  
  2. }  
  3. or  
  4. @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){  
  5. }  


Blackberry Torch

Css代码

  1. @media screen and (max-device-width: 480px) {   
  2. }  


Samsung S3

Css代码

  1. @media only screen and (-webkit-device-pixel-ratio: 2) {  
  2. }  


Google Nexus 7

Css代码

  1. @media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {  
  2. }  


iPad Mini

Css代码

  1. @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {  
  2. }  


iPad 3

横向

Css代码

  1. @media (max-device-width: 1024px) and (orientation: landscape) {   
  2. }  


竖向

Css代码

  1. @media (max-device-width: 768px) and (orientation: portrait) {   
  2. }  


Galaxy Tab 10.1

横向

Css代码

  1. @media (max-device-width: 1280px) and (orientation: landscape) {   
  2. }  


竖向

Css代码
  1. @media (max-device-width: 800px) and (orientation: portrait) {   







原标题:一些实用的CSS Media Query代码片段,个人采集

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

国内可以寄快递到越南吗:https://www.goluckyvip.com/tag/105648.html
哪个快递能发越南:https://www.goluckyvip.com/tag/105649.html
什么快递可以邮寄到越南:https://www.goluckyvip.com/tag/105650.html
国内寄快递到越南多少钱:https://www.goluckyvip.com/tag/105651.html
越南散货快递:https://www.goluckyvip.com/tag/105652.html
什么快递有发越南:https://www.goluckyvip.com/tag/105653.html
三亚有哪些酒店值得入住?:https://www.vstour.cn/a/366173.html
零售晚报:丽人丽妆2023年扭亏为盈 玉容初、美壹堂等自有品牌增速超40% :https://www.kjdsnews.com/a/1836649.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流