CSS之响应式布局


    响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3MediaQuery实现响应布局)。

  响应式布局的优点:

       面对不同分辨率设备灵活性强,  能够快捷解决多设备显示适应问题,根据不同的显示器调整设计最适合用户浏览习惯的页面

  响应式布局的缺点:

       兼容各种设备工作量大,效率低下。代码累赘,会出现隐藏无用的元素,加载时间加长其实这是一种折衷性质的设计解决方案,多方面因素影响而达不到最佳效果,一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

  响应式布局的运用方法:

1.media query: 
通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件

2.语法结构及用法: 

@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二 {sRules}
(1)在link中使用@media:

 

<link rel="stylesheet" href="1.css" media="screen and (min-width:1000px)">

(2)在样式表中内嵌@media:

@media  screen and (min-width: 600px) {
.one{
border:1px solid red;
height:100px;
width:100px;
}

}

       通过上面代码可知:它是通过@media媒介查询判断来执行的CSS样式,也就是说:如果我要做一个响应式布局网站,同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式,通过@media媒介查询来完成响应式布局。

值得注意的是:在手机设备上,我们要禁止用户来缩放屏幕。不禁止的话,可能在显示上会造成错位,以及显示的不是手机网站的样式。所以,我们要通过代码来禁止用户在手机端上缩放屏幕,已达到正常的手机网站效果。

禁止代码如下:<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>  加在头部标签里


在响应市布局中我学的也是不太深所以这需要借鉴以下-->10个免费的响应式布局HTML5+CSS3模板http://www.html5cn.org/article-6799-1.html


 

 

posted @ 2015-08-09 18:26  int_max  阅读(5818)  评论(0编辑  收藏  举报