html中响应式布局的示例分析

这篇文章主要为大家展示了“html中响应式布局的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“html中响应式布局的示例分析”这篇文章吧。

我们提供的服务有：网站设计制作、成都做网站、微信公众号开发、网站优化、网站认证、应城ssl等。为上千余家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的应城网站制作公司

响应式布局浅析

所谓响应式布局，就是页面会根据当前运行的设备的大小自行进行调整，实现方案主要有以下三种：

1）隐藏

例如在 PC 端的一些友情链接或者不重要的内容在移动端可以选择隐藏起来。

2）换行

在 PC 端显示一行的内容，由于移动端设备宽度比较小，所以可以选择显示为几行。

3）自适应空间

例如，左边元素给定一个具体的值，右边元素的宽度令其根据不同的设备宽度自行调整。

具体的实现方法主要有以下几种：

1）rem

rem 是一个相对单位，一般 1rem = html设置的 font-size 的值。
关于 rem 的详细介绍可以参考移动 web 开发适配秘籍 Rem 这个免费课程。

通过设置不同设备 html 的 font-size 改变 rem 的值，令 1rem 单位的值随着设备的增大而增大。

2）viewport

设置，关于这个下面会介绍。

3）media query

判断当前是什么设备，然后根据不同的设备设置不同的样式。

接下来先说一下 viewport 这个 meta 标签。

为什么要让可视区域的宽度等于设备的宽度

viewport 指的是可视区域(说白了就是展示页面的区域，一般情况下当然是设备的屏幕多大就让展示页面的区域是多大，如果屏幕的宽度是 320px，不设置可视区域的大小为 320px，将一个 960px 的页面(假设PC端页面是960px这么大)硬生生地展示在 320px 屏幕上，只能将页面整体缩小为原来的 1/3 去展示，那用户看起来页面上的字就太小了。

如果将可视区域的宽度调整为设备屏幕的宽度，这样会PC端 960px 的页面会在 320px 宽度的设备上重新布局，例如之前在 PC 端要展示在一行的内容，在移动端由于宽度只有 320px 一行肯定展示不下了，所以就会进行换行。经过这样布局显示出来的字体大小和 PC 端是一样的，用户体验就会比较好。

所以我们需要将可视区域的宽度设置为设备的宽度，接下来会有代码进行验证。

对于下面的代码

 



  
    这里是一些不重要的内容，比如友情链接、广告

这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。这里是一些重要的内容，比如一篇文章，文章是整个页面的核心内容。

如果不加，在PC 端的页面如下

html中响应式布局的示例分析

在 iPhonex上的页面

html中响应式布局的示例分析

很明显，在移动端上并没有进行适配只是进行了等比例缩放，导致字体很小，用户体验差。

这个时候再加上，在移动端的页面如下所示

html中响应式布局的示例分析

可见并不是进行整体缩放，而是根据设备的宽度通过换行等方式进行了适配，这个时候的字体和PC端的字体大小也差不多，用户体验好。

通过这条语句来进行移动端适配在一些比较简单的情况，对移动端适配要求比较低的情况下是可以的，但是如果想要进行更好的移动端适配还要采用一些其他的措施，例如媒体查询等。

上图中，红色的部分实际上在移动端可以不用显示的，因为它并不是重要的内容，这个时候就可以采用媒体查询的方式当设备的宽度小于某个值之后就隐藏左边红色的区域。

可以在上面的 css 代码中添加媒体查询，当设备的宽度小于 640px 时就隐藏左边的红色区域。

@media (max-width: 640px){
 .left{
   display: none;
 }
}

在 iphonex 的显示情况如下图所示：

html中响应式布局的示例分析

再来看一个案例：

HTML 代码：


  
    介绍1

介绍2

.container{ margin:0 auto; max-width:800px; border:1px solid black; } .intro{ display: inline-block; width:180px; height:180px; line-height: 180px; text-align: center; border-radius: 90px; border:1px solid red; margin:7px; }

.container{ margin:0 auto; max-width:800px; border:1px solid black; } .intro{ display: inline-block; width:9rem; height:9rem; line-height: 9rem; text-align: center; border-radius: 4.5rem; border:1px solid red; margin:.3rem; } @media (max-width: 375px){ html{ font-size:24px; } } @media (max-width: 320px){ html{ font-size:20px; } } @media (max-width: 640px) { .intro { margin: .3rem auto; display: block; } }