CSS Media Query
来源:互联网 发布:遍历对象数组 编辑:程序博客网 时间:2024/05/06 15:34
移动互联网时代,新设备层出不穷,各种屏幕大小和分辨率的出现,为Web前端设计增加了一些挑战。如何让网站或Web应用完美显示在各种不同的设备上呢?答案是采用响应式设计,让页面根据设备屏幕自动适应并调整。
CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果。
Blackberry Torch
Samsung S3
Google Nexus 7
iPad Mini
iPad 3
横向
竖向
Galaxy Tab 10.1
横向
竖向
CSS3的出现让响应式Web设计变得简单,CSS3提供了强大的media queries,允许你针对不同的条件设置不同的样式,可以在不修改页面内容的情况下,为不同设备提供不同的样式效果。
Max Width
当页面视图区域小于600px宽度的时候,css会被使用到。
@media screen and (max-width: 600px) { .class { background: #ccc; }}
你也可以使用下面的方式,在页面的<head>中引用外部css文件。
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
多个 Media Queries
你可以把多个media queries组合在一起,当视图区域宽度在600px到900px之间的时候,会使用下面的css。
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }}
设备Width
下面的css会在 max-device-width为480px的时候使用,例如iphone。
note:max-device-width指的是设备实际分辨率,max-width指的是可视区域尺寸。
@media screen and (max-device-width: 480px) { .class { background: #000; }}
以下是一些CSS media queries代码片段,你可以添加在自己的项目中,让页面根据屏幕自适应:
iPhone5
- @media screen and (device-aspect-ratio: 40/71) {
- }
- or
- @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
- }
Blackberry Torch
- @media screen and (max-device-width: 480px) {
- }
Samsung S3
- @media only screen and (-webkit-device-pixel-ratio: 2) {
- }
Google Nexus 7
- @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) {
- }
iPad Mini
- @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
- }
iPad 3
横向
- @media (max-device-width: 1024px) and (orientation: landscape) {
- }
竖向
- @media (max-device-width: 768px) and (orientation: portrait) {
- }
Galaxy Tab 10.1
横向
- @media (max-device-width: 1280px) and (orientation: landscape) {
- }
竖向
- @media (max-device-width: 800px) and (orientation: portrait) {
- }
- CSS Media Query
- CSS之Media Query
- CSS Media Query
- CSS之media Query
- CSS 3 之Media Query
- CSS之media query模板
- css media query制作动态布局
- CSS媒体查询(media query)
- Media-Query
- media query
- media-type,media-query
- CSS media query应用中的层叠特性使用最佳实践
- media type与media query
- media type与media query
- media type与media query
- media type与media query
- media type与media query
- media type与media query
- HDU 4355 Party All the Time (三分水题。。。留着TLE)
- linux目录配置
- HDU 1452 Happy 2004(因子和)
- php怎么不让html效果显示而是直接显示代码
- java基础入门----Collections.reverseOrder
- CSS Media Query
- 微信公众平台开发__微信的关注事件
- poj 2376 Cleaning Shifts( 贪心 )
- 《失控》书摘
- sscanf用法
- 云计算技术
- [2014创新工场笔试]求一个正数的开方,不能使用库函数sqrt,精度在0.001以内即可
- 解决无法定位程序输入点SymEnumSymbols于动态链接库dbghelp.dll
- CentOS下安装CodeBlocks