CCS3 @media实现响应式布局

Media query 是CSS3中的新特性,通过@media规则,它允许一段CSS代码在特定条件下才生效。

什么意思?

看下面代码

@media (max-width: 320px)
{   
    #footer
    {
        font-size:13px;
    }
}

只有当浏览器宽度小于320px时,#footer的字体大小才会设置为13px

--------------------------

以前我们可能要为不同的设备比如desktop/mobile分别设置css文件。

那么现在看看利用@media可以这么做

/* For desktop: */
.col-1 {width: 30%;}
.col-2 {width: 10%;}
.col-3 {width: 20%;}
.col-4 {width: 40%;}

@media (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

是不是方便了很多,这样就可以把所有样式放到一个文档里了。

---------------------

很简单是不是,还有几个注意事项要提醒大家

  1. 手机样式优先

    意味着手机样式写在桌面或其他设备样式的前面,这样能提高小型设备上的渲染速度

    上面的例子就应该这样写

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 30%;}
    .col-2 {width: 10%;}
    .col-3 {width: 20%;}
    .col-4 {width: 40%;}
}

首先加载手机样式,当屏幕宽度大于768时加载桌面样式

你可能还要为多种设备添加样式,看下面这个例子

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
@media (min-width: 768px) and (max-width: 998px){
    /* For tablets: */
    .col-1 {width: 25%;}
    .col-2 {width: 10%;}
    .col-3 {width: 15%;}
    .col-4 {width: 30%;}
}
@media (min-width: 999px){
    /* For desktop: */
    .col-1 {width: 30%;}
    .col-2 {width: 10%;}
    .col-3 {width: 20%;}
    .col-4 {width: 40%;}
}

2.你还可以为手持设备的横屏/竖屏做设置

比如为手机设置横屏样式

@media screen and (orientation:landscape) and (max-width: 767px)

设置竖屏样式

@media screen and (orientation:protrait) and (max-width: 767px)

3.分辨率划分的一点建议

手机等小型设备: 320px ~ 479px

大屏手机: 480px ~ 767px

平板设备:768px ~ 1024px

大型平板及PC设备:大于1025px

时间: 2024-10-28 20:32:53

CCS3 @media实现响应式布局的相关文章

利用media query写响应式布局

最近才接触到响应式布局的概念,之前用到的bootstrap就是一种响应式布局的框架.学习的时候参考了http://blog.csdn.net/shoyer/article/details/8293011这篇文章. 简单记录一下用css写响应式布局的方法.大概可以这么理解,通过判断屏幕的大小来调整css的样式从而达到适应不同屏幕的目的. 首先先贴一个html,css都放在同级的css文件夹下面,因为有个简单的轮播,所以要引入jquery <!DOCTYPE html> <html>

响应式布局(二)—— CSS3 Media Query

响应式布局有三种实现方式: CSS3 Media Query 原生 JS 代码 第三方开源框架(最常见的有 bootstrap) CSS3 -- Media Query 1. 媒体查询实现方式 方式一:styleSheet样式表中的写法: 如:<style>标签中使用@media <style> @media screen and (min-width: 480px) { body{background: blue;} } </style> 方式二:<link&g

响应式布局之CSS3 media query

media query即媒体查询,是响应式布局不可获缺的一部分. CSS3中的media query增加了更多的媒体查询,这样在CSS3中我们可以在不改变页面表达内容的情况下,添加各种表达式来设置不同类型的媒体条件,来调整页面布局来适应各种不同设备. media query有两种设置方式: 1.直接在link中判断设备尺寸,引用不同的css来渲染当前页面. <link rel='stylesheet' media ='screen and (max-width:640px)' href = 's

CSS之响应式布局

响应式布局 外部link的max.css #left { width: 50%; height: 100px; background-color: #FF6600; float: left; } #right { width: 50%; height: 100px; background-color: #3565ff; float: left; } 外部link的min.css #left { width: 100%; height: 100px; background-color: #FF66

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 在可视区域的宽度小于 600px 的时候被应用. @media screen and

html5 响应式布局(媒体查询)

响应式布局 响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的

响应式布局二

现在响应式布局用得比较大众的应该是Bootstrap,但是我并不打算使用.原因很简单,我对Bootstrap不熟悉不了解.然后 我简单的看了下Bootstrap是怎么实现的响应式布局.原理很简单,就是使用到了CSS3中的media.media何方神圣?可以用来吃吗?它可以针对不同的媒体类型定义不同的样式,也可以针对不同的屏幕尺寸设置不同的样式.且当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面.既然如此,响应式何愁. 在可视区域的宽度小于 600px 的时候被应用. @me

html5 响应式布局

响应式布局 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端. 第二:响应式设计的步骤 响应式设计的步骤就是1.编

css响应式布局RWD

响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max-height/min-height代替width,height 2)尽量使用百分比,em为单位代替精确值 3)采用媒体查询 二.媒体查询 IE8以下不支持媒体查询,需要引入 <!-- if lte IE 8> <script src="response.min.js"&g