网页布局——响应式布局

Posted jing-tian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页布局——响应式布局相关的知识,希望对你有一定的参考价值。

响应式布局是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本

@media all(用于所有的设备) || screen (用于电脑屏幕,平板电脑,智能手机等)  and|not|only(三个关键字可以选)

 1 <head>
 2 <style media="screen">
 3     @media screen and (max-width:600px)
 4       .con
 5         background:red;
 6       
 7     
 8     @media screen and (min-width:600px) and (max-width:800px)
 9       .con
10         background:blue;
11       
12     
13     @media screen and (min-width:800px)
14       .con
15         background:green;
16       
17     
18     .con
19       width: 100%;
20       height: 100px;
21     
22   </style>
23 </head>
24 <body>
25   <div class="con">
26         一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本
27   </div>
28 </body>

1.meta 标签

最简单的处理方式是加上一个 meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1">

其中,width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。

2.使用 rem

rem 指的是 html 元素的 font-size,html 元素的 font-size 默认是 16px,所以 1 rem = 16px;然后根据 rem 来计算各个元素的宽高,然后配合 media query 就可以实现自适应。

3.media query

css2 允许用户根据特定的 media 类型定制样式,基本语法如下

@media screen and (max-width: 360px)   
     html  font-size: 12px;    

意思就是: 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。

有一个需要注意的点是范围大的要放在上面,范围小的放在下面。假设有两个样式,一个适应 360px 以下,一个适应 640px 以下,如果 360px 的放在上面,但是小于 360px 同样满足小于 640px,这就不是我们想要的结果了,所以范围大的需要放在上面。

 

响应式布局

以上是关于网页布局——响应式布局的主要内容,如果未能解决你的问题,请参考以下文章

响应式布局

H5响应式布局 响应式图片 响应式布局网站怎么写?

网页布局及响应式

响应式网页设计布局

关于响应式网页设计布局

HTML响应式布局实现详解