前端响应式详解
一两年之前，我发现，不少人都被响应式搞得很懵逼。
如今，我依然发现，仍是有不少人，依旧被响应式搞得很懵逼。
因此，我也很懵逼。
究竟是哪一个环节出了问题，让这么多学习前端的同窗对于这个响应式很懵逼呢？
我想，平时老是会百度过响应式这个关键词吧，数以万计的教程，难道就没有一个能让本身顿悟的？
因此，我不信，为了天下没有难学的编程，我打算继续为这万分之一添砖加瓦。
什么是响应式？
不少人之因此对响应式很懵逼，最基本的一个缘由就是，压根就不懂什么是响应式。
废话，要是懂的话，我还有啥好问的？
没错，你说得颇有道理。
因此，我打算用下文，来详细讲解，什么是响应式。
任何行业，都喜欢创造术语，一样地，响应式就是其一。
所谓的术语，必然和专业，高深，冷酷，无情挂钩。
你想百般亲近它，可是它却对你不理不睬。
为了打破大家两者之间的僵局，我打算揭下响应式这一层神秘的面纱。
响应式：响应不一样屏幕设备合适地展示网页效果的方式或着手段。
没错，不只仅是方式，并且还有手段，请先对这个词有个印象，后面咱们会和它，再次相遇。
我不知道，同窗们在查找资料的时候，文章里是怎么解释响应式的。
能够看到，我这句解释，很是妙。
响应响应，何谓响应？我喊你，你回应我，这就是响应，响应了我喊你这件事。
我打你，你反过来打我。这不对，虽然这没有违背物理规律，可是这不够尊老爱幼。
那么一样的，我喊你，你回答：哎，哥，咋了？
你妈妈喊你，你回答：哎，妈，又怎么了？
你老爸喊你，你回答：哎，老爸，有啥事啊？
你老妹，老弟喊你，你回答：喊什么喊，一遍玩去，我忙着呢。
因此，从这里能够得知，什么是响应式？就是说，不一样的屏幕，它不能一成不变地显示同样的内容，得根据屏幕大小，显示合适的内容。
记住合适这个词，你不能说你妈妈喊你，你也回答：哎，哥，咋了？对不对？
见人说人话，见鬼说鬼话，否则你行走江湖两行泪，痛苦不堪又受罪。
因此，要理解一个术语，咬文嚼字是有必要的。
其次，咱们来看一下，这个不一样屏幕的含义。
这个地方，很容易让人啼笑皆非。
我遇到过不止一个同窗，绞尽脑汁地在思考，若是用户缩放百分比，鼠标拖动屏幕调整大小，我该怎么响应式？
兄die!你的响应式是要适应天地万物，比孙悟空的七十二般变化还能变吗？
那我只能说一句：牛逼！
因此，这里要牢记，响应式并非孙悟空，它所要适应的，就是那些，正常状况下的响应式。
那种非人类的用户，拿着浏览器，网页百分比调个不停，网页大小鼠标拖了个不亦乐乎，这种用户你留着他干吗？留着他炒个青椒炒肉不放辣椒吗？
因此，同窗们啊，大家是在花钱，花时间，花精力学代码啊，头脑要灵活一点啊！
一顿痛批以后，咱们来总结一下：总结如上。
一个响应式板砖的响应式历程。
扯了那么多，我相信，同窗们最关心的仍是这里。
no b b,show code.
同窗们这种实事求是的精神，搞得我几度都想再多BB一下。
不过，为了同窗们的前途着想，我决定，暂时先小声BB。
首先呢，咱们从最简单的开始。
毕竟，我不想让你们一口吃个大胖子，更加不想让你们一口吃瘪。
更况且，吃个大胖子仍是违法的。
为了广大胖友的利益，咱们先来画一块板砖。
尽管我一直以来，都坚信咱们的中国汉字，博大精深，源远流长。
可是，自从碰见了百度翻译，我没想到，原来咱们的汉语拼音，更加博大精深！
/* 板砖div */
<div class="MLGB"></div>
复制代码
/* 重置一下 */
* {
padding: 0;
border: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
}
/* 板砖 */
.MLGB {
width: 800px;
height: 500px;
background-color: antiquewhite;
}
复制代码
没办法，我是一个相信缘分的人，天意如此，我也只能顺其天然。
因此呢，这就是一个普通的，有高度，有宽度的，div。
你说这div，它又长又宽，它像不像砖？
为了让你们更清楚地看到全貌，咱们将浏览器总体调整一下。
那么，这么一调整呢，问题就来了。
你们发现没有，底部竟然出现了可恶的横向滚动条！
什么鬼？！这一点都不响应式！
/* 重置一下 */
* {
padding: 0;
border: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
}
/* 板砖 */
.MLGB {
width: 100%;
height: 500px;
background-color: antiquewhite;
}
复制代码
解决它，把宽度变成百分比，就，设置成100%好了。
完美，一个响应式的板砖，应天时地利，涅槃重生！
那么，同窗们，响应式是否是很简单？
咱们甚至有N种方法，让这个板砖响应式。
/* 重置一下 */
* {
padding: 0;
border: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
}
/* 板砖 */
.MLGB {
width: 1rem;
height: 500px;
background-color: antiquewhite;
}
复制代码
document.documentElement.style.fontSize = window.innerWidth + "px";复制代码
没错，就是这么嚣张，直接1rem。
那么，这个1rem等于多宽呢？
就是咱们的100%宽度，也就是等于，html标签里font-size设置的字体大小的值。
因此，1rem等于html根元素的font-size的数值大小。
不信的话，咱们能够设置宽度为0.5rem。
/* 板砖 */
.MLGB {
width: 0.5rem;
height: 500px;
background-color: antiquewhite;
}
复制代码
一图胜千言，本文瞬间能够少写1000字，开心。
那么，除了rem，百分比，还有什么办法呢？
记住这一点，js是无所不能的。
/* 板砖 */
.MLGB {
/* 宽度不见啦！ */
height: 500px;
background-color: antiquewhite;
}复制代码
document.getElementsByClassName("MLGB")[0].style.width = window.innerWidth + "px";复制代码
因此你们看到没有，咱们直接用万能的js，直接给板砖设置等于窗口内容的宽度，不就好了？
因此，你们还记得前面的那个词语，手段，吗？
不是你不会响应式，是由于，你的手段不够毒辣！
你百分比掌握着响应式的法术，却没法施展，为啥呢？你缺少心法。
还好，我这有无数的心法，关注我，我教你心法。
状况固然没这么简单
真正的历练，才刚刚开始。
假设咱们接到这样一个，开发天猫双十一主战场页面...的异想天开的任务。
<div class="MLGB">
<!-- 头部 -->
<div class="header">
欢迎你们来到，双十一天猫主会场！
</div>
<!-- 分会场入口 -->
<div class="nav">
<a class="box" href="##">鞋子</a>
<a class="box" href="##">箱包</a>
<a class="box" href="##">数码</a>
<a class="box" href="##">服装</a>
<a class="box" href="##">乐器</a>
<a class="box" href="##">户外</a>
<a class="box" href="##">家具</a>
<a class="box" href="##">家具</a>
<a class="box" href="##">影视</a>
<a class="box" href="##">美食</a>
</div>
</div>复制代码
/* 搬砖 */
.MLGB {
height: 500px;
background-color: antiquewhite;
}
.header {
height: 50px;
line-height: 50px;
font-size: 18px;
color: #fff;
text-align: center;
background-color: #f97c7c;
}
.nav {
height: 100px;
}
.box {
display: block;
width: 10%;
float: left;
height: 100px;
line-height: 100px;
text-align: center;
text-decoration: none;
font-size: 18px;
border: 1px solid #ddd;
}
复制代码
咱们刷刷刷，几个分会场入口就布局完了。
而后，咱们一边欣赏这个10分钟以内创造的艺术品，一边品尝这咱们前面的青椒炒肉不放辣椒的时候。
测试跑了过来...
鸡哥，鸡哥，出问题了！
嗯！你眼露杀气，在测试和他的手机之间，以每秒300赫兹的频率，来回扫描。
不，这不可能，我是一个合格的高级前端工程师，你这是什么手机？哼，我拿本身的瞧瞧。
因而，10秒钟后...
小李啊，你回去吧，这个BUG，我来解决。
/* 搬砖 */
.MLGB {
height: 500px;
background-color: antiquewhite;
}
.header {
height: 50px;
line-height: 50px;
font-size: 18px;
color: #fff;
text-align: center;
background-color: #f97c7c;
}
.nav {
height: 100px;
}
.box {
display: block;
width: 100%;
max-width:187px;
float: left;
height: 100px;
line-height: 100px;
text-align: center;
text-decoration: none;
font-size: 18px;
border: 1px solid #ddd;
}
复制代码
你陷入了沉思，通过短短3个小时的深思熟虑，将CSS改为如上。
你发现，入口虽然排版变好看了，可是，入口元素高度却超出板砖盒子范围了，并且，nav的高度也是固定的。
因而，你动手优化了起来。
/* 搬砖 */
.MLGB {
/* height: 500px; */
background-color: antiquewhite;
}
.header {
height: 50px;
line-height: 50px;
font-size: 18px;
color: #fff;
text-align: center;
background-color: #f97c7c;
}
.nav {
/* height: 100px; */
}
.nav::after{
content:"";
display: block;
height: 0;
clear: both;
overflow: hidden;
}
.box {
display: block;
width: 100%;
max-width: 187px;
float: left;
height: 100px;
line-height: 100px;
text-align: center;
text-decoration: none;
font-size: 18px;
border: 1px solid #ddd;
}复制代码
可是，你很快发现，测试又来了。
你有点怀疑，她是否是喜欢你？可是，手机上的测试效果，让你暂时打消了这怀疑。
没错，她的是iphone5，而你的是iphone6。
你很快发现了，那个box的宽度不能写死。
弥留，哦，不，迷茫之际，你想起了昨天仔细研究过的《高级前端必会的flex布局》。
/* 重置一下 */
* {
padding: 0;
border: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
}
/* 搬砖 */
.MLGB {
/* height: 500px; */
background-color: antiquewhite;
}
.header {
height: 50px;
line-height: 50px;
font-size: 18px;
color: #fff;
text-align: center;
background-color: #f97c7c;
}
.nav {
/* height: 100px; */
display: flex;
flex-wrap: wrap;
}
.nav::after {
content: "";
display: block;
height: 0;
clear: both;
overflow: hidden;
}
.box {
display: flex;
justify-content: center;
flex: 1 1 auto;
min-width: 160px;
height: 100px;
line-height: 100px;
text-decoration: none;
font-size: 18px;
border: 1px solid #ddd;
}复制代码
你的iphone6
她的iphone5
你发现，你的iphone6，她的iphone5都正常了。
同时，更复杂的需求又来了
领导说，要作一个，用户购物车，收藏，设置，查看过的商品侧边栏，相似QQ那样。PC端默认显示，手机端默认隐藏，并且在头部区域，显示一个可以点击弹出侧边栏的按钮。
/* 重置一下 */
* {
padding: 0;
border: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
}
/* 搬砖 */
.MLGB {
/* height: 500px; */
background-color: antiquewhite;
}
.header {
height: 50px;
line-height: 50px;
font-size: 18px;
color: #fff;
text-align: center;
background-color: #f97c7c;
}
.nav {
/* height: 100px; */
display: flex;
flex-wrap: wrap;
}
.nav::after {
content: "";
display: block;
height: 0;
clear: both;
overflow: hidden;
}
.box {
display: flex;
justify-content: center;
flex: 1 1 auto;
min-width: 160px;
height: 100px;
line-height: 100px;
text-decoration: none;
font-size: 18px;
border: 1px solid #ddd;
}复制代码
<div class="MLGB">
<!-- 头部 -->
<div class="header">
欢迎你们来到，双十一天猫主会场！
</div>
<!-- 主要内容区域 -->
<div class="main">
<!-- 左侧菜单 -->
<div class="menu">
<div class="li">购物车</div>
<div class="li">个人收藏</div>
<div class="li">浏览记录</div>
<div class="li">已经购买</div>
<div class="li">设置</div>
<div class="li">退出</div>
</div>
<!-- 分会场入口 -->
<div class="nav">
<a class="box" href="##">鞋子</a>
<a class="box" href="##">箱包</a>
<a class="box" href="##">数码</a>
<a class="box" href="##">服装</a>
<a class="box" href="##">乐器</a>
<a class="box" href="##">户外</a>
<a class="box" href="##">家具</a>
<a class="box" href="##">家具</a>
<a class="box" href="##">影视</a>
<a class="box" href="##">美食</a>
</div>
</div>
</div>复制代码
很快，PC端的效果就实现了。
使人头疼的移动端该怎么作呢？
万能的js大人确定是有办法解决的，可是，杀鸡焉用牛刀，难道就没有更简单的方法吗？
伟大的CSS大人，历来不会让咱们高级前端难堪。
它传之于世的《CSS圣经》中，早已准备好了一切。
果真，乱军从中，被你找到了蛛丝马迹。
媒体查询（@media），这个专为响应式而生的时势英雄，终于要从尘封的历史遗迹中走出来了。
/* 重置一下 */
* {
padding: 0;
border: 0;
margin: 0;
outline: 0;
box-sizing: border-box;
}
/* 搬砖 */
.MLGB {
/* height: 500px; */
background-color: antiquewhite;
}
.header {
display: flex;
align-items: center;
height: 50px;
font-size: 18px;
padding: 0 10px;
color: #fff;
text-align: center;
background-color: #f97c7c;
}
.main {
display: flex;
}
/* 切换菜单的按钮 */
.toggle-menu {
height: 30px;
line-height: 30px;
text-align: center;
width: 30px;
font-size: 14px;
background-color: #607d8b;
margin-right: 10px;
}
/* 菜单 */
.menu {
flex: 0 0 140px;
background-color: #5ed5e4;
}
.menu .li {
height: 30px;
line-height: 30px;
padding: 0 10px;
border-bottom: 1px solid #91dfe8;
}
.nav {
/* height: 100px; */
display: flex;
flex-wrap: wrap;
flex: 1 1 100%;
}
.nav::after {
content: "";
display: block;
height: 0;
clear: both;
overflow: hidden;
}
.box {
display: flex;
justify-content: center;
flex: 1 1 auto;
min-width: 160px;
height: 100px;
line-height: 100px;
text-decoration: none;
font-size: 18px;
border: 1px solid #ddd;
}复制代码
<div class="MLGB">
<!-- 头部 -->
<div class="header">
<div class="toggle-menu">菜</div>
<div class="title">欢迎你们来到，双十一天猫主会场！</div>
</div>
<!-- 主要内容区域 -->
<div class="main">
<!-- 左侧菜单 -->
<div class="menu">
<div class="li">购物车</div>
<div class="li">个人收藏</div>
<div class="li">浏览记录</div>
<div class="li">已经购买</div>
<div class="li">设置</div>
<div class="li">退出</div>
</div>
<!-- 分会场入口 -->
<div class="nav">
<a class="box" href="##">鞋子</a>
<a class="box" href="##">箱包</a>
<a class="box" href="##">数码</a>
<a class="box" href="##">服装</a>
<a class="box" href="##">乐器</a>
<a class="box" href="##">户外</a>
<a class="box" href="##">家具</a>
<a class="box" href="##">家具</a>
<a class="box" href="##">影视</a>
<a class="box" href="##">美食</a>
</div>
</div>
</div>复制代码
首先呢，你没有管其余乱起八遭的东西，先简单粗暴地让这个菜单显示出来。
由于，做为一个拥有高级思惟的高级前端，你知道，想那么可能是没用的。
接下来你要干吗呢？你要把这个菜单，隐藏起来，由于目前是PC端。
@media screen and (min-width: 500px) {
.header .toggle-menu {
display: none;
}
}复制代码
十分完美，@media果真厉害。
再接下来要干吗呢？
移动端按钮显示，菜单隐藏。
/* PC端要作的 */
@media screen and (min-width: 500px) {
.header .toggle-menu {
display: none;
}
}
/* 移动端要作的 */
@media screen and (max-width: 500px) {
.header .toggle-menu {
display: block;
}
.menu {
display: none;
}
}复制代码
看起来十分完美，不用费javascript一兵一卒就搞定了。
更况且，这个方法，比写一堆js优雅多了。
接下来要干吗呢？给按钮绑定点击事件，点击切换菜单的display值就好了。
那么，这里呢，就暂且不表。
因为时间关系呢，站长还有不少事作，坚持天天写一篇对于目前来讲，已经有点难度了。
也是由于时间的关系，本文并无更加详细地讲述关于响应式的方方面面和各类解决方法，各类坑。
不过，也足以抛砖引玉，解决同窗们的一部分关于响应式的疑惑。
记住那个妙言：响应不一样屏幕设备合适地展示网页效果的方式或着手段。
响应式是一种解决不一样屏幕正确且合适地显示网页内容的思想和方法，它并不等于框架，更不等于bootstrap。
bootstrap里面，有一套响应式布局的模块，这个也很简单，我以后会写文章告诉你们，如何写一个本身的响应式模块。
知其然，知其因此然，我是陈随易，码路在线网站(coderoad.online)和码路在线公众号的做者。
热衷于编程技术的分享和详解，让天下没有难学的代码。
若是你喜欢个人文章，请关注个人公众号（码路在线），或者加个人微信c91374286或者qq24323626
喜欢和一切爱学习，爱编程的同窗交朋友。
另外，还有更多，更好玩，更有趣的编程技术，即将分享给你。
码路在线 coderoad.online
相关文章
- 1. 前端响应式详解
- 2. 前端_响应式
- 3. 前端设计 响应式设计_响应式响应设计
- 4. 前端响应式开发
- 5. 响应式前端框架
- 6. 前端-响应式布局
- 7. 前端【响应式】开发详细解析
- 8. 详解CSS响应式
- 9. bootstrap响应式前端页面
- 10. 前端响应式框架对比
- 更多相关文章...
- • ARP报文格式详解 - TCP/IP教程
- • UDP报文格式详解 - TCP/IP教程
- • Flink 数据传输及反压详解
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安装cuda+cuDNN
- 2. GitHub的使用说明
- 3. phpDocumentor使用教程【安装PHPDocumentor】
- 4. yarn run build报错Component is not found in path “npm/taro-ui/dist/weapp/components/rate/index“
- 5. 精讲Haproxy搭建Web集群
- 6. 安全测试基础之MySQL
- 7. C/C++编程笔记：C语言中的复杂声明分析，用实例带你完全读懂
- 8. Python3教程(1)----搭建Python环境
- 9. 李宏毅机器学习课程笔记2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里云ECS配置速记
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 前端响应式详解
- 2. 前端_响应式
- 3. 前端设计 响应式设计_响应式响应设计
- 4. 前端响应式开发
- 5. 响应式前端框架
- 6. 前端-响应式布局
- 7. 前端【响应式】开发详细解析
- 8. 详解CSS响应式
- 9. bootstrap响应式前端页面
- 10. 前端响应式框架对比