利用css让网页更机智地，适配不同的尺寸

Vedu • 2021-01-11 07:19 • 界面设计 • 阅读 1086

响应式网页是这几年很流行的网页风格之一，他能够以一套网页代码，面对不同的条件，例如改变浏览器的宽度，手机横竖屏，作出不同的样式调整。

一套代码走天下

最出名的响应式框架是Bootstrap，来自Twitter。也是每个刚入门前端开发师必学的框架，利用这个框架可以很轻松实现响应式效果。

面对不同的浏览器宽度，作出界面调整

要实现响应式，关键在于使用媒体查询 Media！

语法

@media （媒体特性）and （媒体特性） {你的样式}

看起来好像很复杂，先看完整的代码

@media  (max-width:480px){ 
    body{background-color:green}
 }

上面这句话的意思，浏览器的宽度小于或等于480px时，背景颜色是绿色。

再来多一个，如下

@media  (min-width:481px){ 
    body{background-color:red}
}

上面这句话的意思，浏览器的宽度大于或等于481px时，背景颜色是红色。

媒体特性

媒体特性就是依据什么样的条件来进行更改样式，是根据屏幕宽度大小、还是横竖屏呢。这些条件都是官方定的，非常多。但实际上，真正有用的就是 min-width和max-width，根据浏览器宽度来设定不同的样式。

这里会很容易混淆min-width和max-width的意义。min-width表示大于等于，max-width表示小于等于。

@media (max-width: 500px) {
    /** 窗口宽度小于等于500像素的样式 **/
}

@media (min-width: 800px) {
    /** 窗口宽度大于等于800像素的样式 **/
}

当有多个媒体特性时，用and连接，就可以形成一个区间范围

@media (min-width: 600px) and (max-width: 700px) {
    /** 窗口宽度在600-700像素的样式 **/
}

这就是他最基本的用法，凡是有两面性，下面来说说他的优缺点。

优点

（1）面对不同分辨率设备灵活性强

（2）能够快捷解决多设备显示适应问题

缺点

（1）兼容各种设备工作量大，效率低下

（2）代码累赘，会出现隐藏无用的元素，加载时间加长

案例

全局布局

下面这种响应式布局最为常见，通过媒体查询定义不同的样式，让其能够适应手机浏览器和桌面浏览器：

1、电脑端大屏幕下，网页元素全部展示

电脑端样式

2、手机端下，因为屏幕有限，只能让主体内容呈现出来，其余部分隐藏起来，并且让字体缩小。

手机端样式

栅格布局

一提起响应式，绝对离不开强大的栅格布局，根据浏览器的宽度，设置容器不同的列宽。

class=“row”>   <div class=“col-xs-12 col-sm-6 col-md-8”>div>   <div class=“col-xs-12 col-sm-6 col-md-8”>div> div>

只需要按照填写bootstrap参数，即可匹配不同的宽度

栅格布局的原理其实也是利用了媒体查询，这样你就可以自定义一份自己的栅格布局。

部分源代码

总结

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/19539.html

利用css让网页更机智地，适配不同的尺寸

语法

案例

总结

相关推荐

发表评论