前端：响应式网页原理解析

最新推荐文章于 2024-06-05 08:31:23 发布

饭一口口吃

最新推荐文章于 2024-06-05 08:31:23 发布

阅读量928

点赞数 2

分类专栏：前端文章标签：前端响应式网页制作

本文链接：https://blog.csdn.net/weixin_36662706/article/details/86367150

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

对于响应式网页以前很多人都用百分之表示来构造自己网站，但是这样对于网站布局，真实很难看有时候模块被拉得很长，但是现在一般刚一接触前端大家就开始用各种UI框架来解决网站响应式问题，当然这也是个完美地解决方案，那我们来看下，如果想要自己写一个响应式到底多难

响应式网站=媒体查询+弹性图片

@media 媒体查询就是根据不同设备给予不同的样式，我们用这个css3中的语句就可以设计我们网站的样式了

这里我们还需要了解下“em”这样一个值，我们平时设计网页大小的时候都是使用的px（这样一个相对于屏幕大小的长度单位），而“em” 这个单位是相对于我们浏览器大小的尺寸单位，因为任意未调整浏览器默认字体高度都是16px,所以我们可以认为1em=16px.

那么我们知道em这个单位到底有什么用处呢？

先不要着急我们再来了解下rem这个单位，em是根据浏览器来进行大小评定的单位，而在支持rem的浏览器中，rem是根据HTML标签来进行定位的，他的参考是HTML的根元素。
1、IE9/IE10在用于伪元素时或者使用字体简写声明时不支持rem；
2、IOS Safari5.0-5.1虽然支持rem，但是在使用媒体查询时不支持rem。
如果你的网站面向是IE用户那么还是少量考虑rem了吧。

知道了em和rem那么我是不是就可以通过监控这两个单位表示的数给予不同设备，不同的样式了能？那么我简单写了下面一些内容

@media only screen and (max-width: 50em) {
    header .top ul li a {
        padding: 0 1rem;
    }
}
/*最大宽度为50em的时候给予一些样式设置*/
@media only screen and (min-width: 30.0625em) and (max-width: 50em) {

}
/*在30.0625em和50em之间给予一个样式*/
@media only screen and (max-width: 30em) {
    header .top .tel,
    header .top ul li:nth-child(3),
    header .top ul li:nth-child(4) {
        display: none;
    }
}
/*30em以下给予一个样式*/
/*大小数据根据你需要对于对应设备的响应而设置*/

通过上面一段简单的代码我们就可以对我们不同分辨率下网站的显示出来效果做不同的调整，更好的突出我们想展现的页面元素，尤其在移动设备上突出一些我们更想让用户看到的元素，减少我们一些表示意义并不大的元素。

接下来解决一个我们想让在不同设备上都显示出来我们的高清图片这样一个问题，我们把它叫做弹性图片,这就要牵扯到h5的一个新的标签SOURCE,它里面有一个媒体资源类型属性media,可以设置浏览器在什么样的状态下选择什么样的图片就可以做到弹性图片了，下面是一些简单参考代码

<dev class="ad">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <picture>
                    <source srcset="img/ad001-l.png" media="(min-width:50em)">
                    <source srcset="img/ad001-m.png" media="(min-width:30em)">
                    <img src="img/ad001.png">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/ad002-l.png" media="(min-width:50em)">
                    <source srcset="img/ad002-m.png" media="(min-width:30em)">
                    <img src="img/ad002.png">
                </picture>
            </div>
            <div class="item">
                <picture>
                    <source srcset="img/ad003-l.png" media="(min-width:50em)">
                    <source srcset="img/ad003-m.png" media="(min-width:30em)">
                    <img src="img/ad003.png">
                </picture>
            </div>
        </div>
    </dev>

当然为了有更好的网站展示效果还可以给用户谈个小标签让他下载最新的浏览器，因为一些标签在老版的ie中是不支持的

<body>
<!--[if lte IE8]>
<p class="browerupgrade">您的浏览器版本过低请到 <a href="http://browsehappy.com">这里</a> 更新，获取最佳的体验</p>
<![endif]-->

实力心机一波如果你的浏览器小于等于IE8，那么不好意思，快去下载最新的浏览器。

如果文章有什么问题还希望大家留言指正，我来改正它，免得误导其他人。

饭一口口吃

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端：响应式网页原理解析

前言对于响应式网页以前很多人都用百分之表示来构造自己网站，但是这样对于网站布局，真实很难看有时候模块被拉得很长，但是现在一般刚一接触前端大家就开始用各种UI框架来解决网站响应式问题，当然这也是个完美地解决方案，那我们来看下，如果想要自己写一个响应式到底多难响应式网站=媒体查询+弹性图片@media 媒体查询就是根据不同设备给予不同的样式，我们用这个css3中的语句就可以设计我们网站的样式了...
复制链接

扫一扫