网站首页学无止境CSS
响应式布局设置--@media only screen and
发布时间:2014-09-29 18:05:02编辑:songlin阅读(639)
- 1280 x 800
- ipad 1024 x 768
- Android 800 x 480
- iPhone 640 x 960
- @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
- .class {
- background: #ccc;
- }
- }
- @media only screen and (device-aspect-ratio:4/3)
- Android LDPI: 320×240 0.75
- Iphone 3 & Android MDPI: 320×480 1
- Android HDPI: 480×800 1.5
- Iphone 4: 960×640 2.0
- -webkit-min-device-pixel-ratio: 1.0
- -webkit-min-device-pixel-ratio为1.3
- Google Nexus 7
- -webkit-min-device-pixel-ratio为1.5
- Google Nexus S Samsung Galaxy S II HTC DesireHTC Desire HDHTC Incredible S HTC VelocityHTC Sensation
- -webkit-min-device-pixel-ratio为2.0
- iPhone 4 iPhone 4S iPhone 5 iPad (3rd generation) iPad 4所有Retina displays 的MACGoogle Galaxy NexusGoogle Nexus 4Google Nexus 10Samsung Galaxy S IIISamsung Galaxy Note IISony Xperia SHTC One X
- -webkit-min-device-pixel-ratio: 3.0
- 1.HTC Butterfly
- 2.Sony Xperia S
- (min-resolution:144dpi)
- @media print and (min-resolution: 144dpi) { … }
- /* 1、Smartphones (portrait and landscape) 只能手机横竖屏 */
- @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
- /* Styles */
- }
- /* 2、Smartphones (landscape) 智能手机横屏 */
- @media only screen and (min-width : 321px) {
- /* Styles */
- }
- /* 3、Smartphones (portrait) 智能手机竖屏 */
- @media only screen and (max-width : 320px) {
- /* Styles */
- }
- /* 4、iPads (portrait and landscape) IPAD 横竖屏 */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
- /* Styles */
- }
- /* 5、iPads (landscape) IPAD横屏 */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
- /* Styles */
- }
- /* 6、iPads (portrait) IPAD 竖屏 */
- @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
- /* Styles */
- }
- /* 7、iPhone 4 */
- @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
- /* Styles */
- }
- /* 8、640px显屏 */
- @media screen and (max-width : 640px) {
- /* CSS Styles */
- }
- /* 9、800px显屏 */
- @media screen and (max-width : 800px) {
- /* CSS Styles */
- }
- /* 10、1024显屏 */
- @media screen and (max-width : 1024px) {
- /* CSS Styles */
- }
- /* 11、Desktops and laptops */
- @media only screen and (min-width : 1224px) {
- /* Styles */
- }
- /* 12、Large screens */
- @media only screen and (min-width : 1824px) {
- /* Styles */
- }
- /* iphone 6 横屏 */
- @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2){
- /* Styles */
- }
- /* iphone 6 竖屏 */
- @media only screen
- and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2){
- /* Styles */
- }
- /* iphone 6 plus 横屏 */
- @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 3) {
- /* Styles */
- }
- /* iphone 6 plus 竖屏 */
- @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 3) {
- /* Styles */
- }
@media only screen and
only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字,其他关键字还包括 not(排除某种设备)
/* 常用类型 */
类型 解释
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示,比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体,比如电传打字机
tv 电视
screen一般用的比较多,下面是我自己的尝试,列出常用的设备的尺寸,然后给页面分了几个尺寸的版本。
/* 常用设备 */
设备 屏幕尺寸
显示器
两种方式
a
意思是当屏幕的宽度大于600小于800时,应用styleB.css
b
device-aspect-ratio
device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:
-webkit-min-device-pixel-ratio的常见值对比(是设备上物理像素和设备独立像素,设备像素比率)
设备分辨率设备像素比率
所有非 Retina 的 Mac
所有非 Retina 的 iOS 设备
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S
其他设备
使用于:位图媒体类型,接受max/min前缀:
“resolution”媒体特性描述输出设备的分辨率,例如,像素密度。若查询设备的非方形像素,在“min-resolution”查询中指定的值必须与最稀疏尺寸进行比较,在“max-resolution”查询中必须与最密集尺寸进行比较。对于“resolution”(没有“min-”或“max-”前缀)查询从不查询设备的非方形像素。
对于印刷机,相当于分辨率(任意颜色的绘制点的分辨率)。
举例说明:该媒体查询表示样式表适用于分辨率大于每英寸144点的设备:
更新CSS3 Media Queries模板查询