网页布局——响应式布局

时间 2020-07-07

标签网页布局响应栏目 HTML 繁體版

原文原文链接

响应式布局是一个网站可以兼容多个终端---而不是为每一个终端作一个特定的版本css

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

 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 标签chrome

最简单的处理方式是加上一个 meta 标签设置屏幕按1：1尺寸显示，在 iPhone 和其余智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。浏览器

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

1 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
2 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3 <meta name="HandheldFriendly" content="true">

2.经过媒体查询设置样式media query布局

media query 是响应式设计的核心，它可以和浏览器进行沟通，告诉浏览器页面如何呈现，假如一个终端的分辨率小于980px，那么能够这样写:网站

1 @media screen and (max-width:980px){
2      #head { …; }
3      #content { …; }
4      #footer { …; }
5 }

意思就是：当屏幕的宽度大于等于 980 px 的时候 html 设置样式。ui

rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，因此 1 rem = 16px；而后根据 rem 来计算各个元素的宽高，而后配合 media query 就能够实现自适应。spa

3.设置多种视图scala

假如咱们要兼容ipad和iphone视图，咱们能够这样设置：

1 /**ipad**/
2 @media only screen and (min-width:768px)and(max-width:1024px){}
3 /**iphone**/
4  @media only screen and (width:320px)and (width:768px){}

4.响应式设计须要注意的问题

　　4.一、宽度不固定，能够使用百分比

#head{width:100%;}
#content{width:50%;}

　　4.二、在html页面中的图片，好比文章里插入的图片咱们均可以经过css样式max-width来进行控制图片的最大宽度，如：　

img{
    max-width:100%;
    height:auto;
}