响应式布局

2021-07-28 19:34发布

站内文章 / HTML/CSS
771 0 0

响应式布局

 

响应式布局概念

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。 响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中，你也会因此更好的掌握一些基础知识。当然，要做到精确到像素级别的去预测设943*684像素视区里的样子是很难的，但是你至少可以很轻松的确定它是能够正常工作的，因为页面的基本特性和布局结构都是根据语义结构来部署的。Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。经过不停地学习和实践，如今总结响应式设计的方法和注意点。其实很简单。

 响应式设计的步骤

1. 设置 Meta 标签

大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

[1]（user-scalable = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。 ）

3. 通过媒介查询来设置样式 Media Queries

Media Queries 是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

这里的样式就会覆盖上面已经定义好的样式。

4. 设置多种试图宽度

假如我们要设定兼容 iPad 和 iphone 的视图，那么可以这样设置：

/** iPad **/@media only screen and (min-width: 768px) and (max-width: 1024px) {}/** iPhone **/@media only screen and (min-width: 320px) and (max-width: 767px) {}

一些注意的：

1. 宽度需要使用百分比

例如这样：

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

2. 处理图片缩放的方法

简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。

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

用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 html 自定义属性的功能： HTML 结构：

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

CSS 控制：

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}
@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

技术要点

标签设置

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<!-- 如果可能，调用 chome 内核，或者高版本的 IE 内核 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- 兼容不支持 viewport 的设备 -->

<meta name="HandheldFriendly" content="true">

使用媒体查询适配对应样式根据目标用户的访问设备的主要类型做三种或四种布局，分别设置一套样式。

 

 

 

 

移动端优先：

/* 超小型设备（手机，768px 以下）*/

@media screen and (min-width:768px) { ... } /* 小型设备（平板电脑，768px 以上） */

@media screen and (min-width:992px){ ... }/* 中型设备（台式电脑，992px 以上） */

@media screen and (min-width:1200px){ ... }/* 大型设备（大台式电脑，1200px 以上） */

大屏优先：

/* 大型设备（大台式电脑，1200px 以上） */

@media screen and (max-width:1200px) { ... } /* 中型设备（台式电脑，1200px 以下） */

@media screen and (max-width:992px){ ... }/* 小型设备（平板电脑，992px 以下） */

@media screen and (max-width:768px){ ... }/* 超小型设备（手机，768px 以下） */

百分比布局：

宽度不固定，可以使用百分比，内外边距也可以使用百分比。

\#head{width:100%;}

\#content{width:50%;}

ul li{ width:16%;padding:1%; margin:0 1%;}

 响应式图片

 img{

width:100%;

height:auto;

display:block;

}

横竖屏

/* 横屏: 设备屏幕的宽比高大 */‘’

  @media screen and (orientation: landscape) {

         .box {

             background-color: red;

         }

     }

     /* 竖屏：设备屏幕的宽比高小 */

     @media screen and (orientation: portrait) {

         .box {

             background-color: blue;

        }

     }