整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
机，平板设备的暴增，直接促进了移动互联网的大潮来袭，互联网迎来了更多的变革，包括web前端行业也是， 现在变为移动web前端开发了，有多少人迎风倒下，又有多少人经受了这场革命的洗礼。这次教大家如何为自己网站添加响应式，快速抓住移动互联网用户。
流行的有某适配，如果你愿意每年支出高额的费用的话，这里介绍的是一个屌丝如何为网站添加响应式，响应式实现原理非常简单：就是通过css3 media query技术通过浏览器窗口宽度的判断，来调整合适的布局。
1，在网站head区间里面添加
<meta content="width=device-width,initial-scale=1" name="viewport">
2,在head区域添加
<link rel="stylesheet" href="css/responsive.css">，在目录下新建 responsive.css文件。
3，书写css代码
/*当宽度为640的时候的样式*/
@media only screen and (max-width:640px) {
}
/*当宽度为480的时候的样式*/
@media only screen and (max-width:480px) {
}
书写css代码需要你有一些css基础，可以上w3school学习下，切图网开发了一款用于快速响应式布局的css框架——快切，它包含了很多具有响应式的组件构成，基于它可以快速完成响应页面的搭建。
http://kuaiqie.qietu.com
如果你对web前端技术感兴趣，加我们微信：qietuwang
文地址: https://medium.com/free-code-camp/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431
原文作者: Per Harald Borgen
翻译作者: https://github.com/hanxiansen
在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。ok，让我们发车吧。
在本文中，我将继续使用我在第一篇 CSS Grid 布局教程文章中的网格布局。然后，我们将在文章末尾添加图片。下面是我们初始化网格的外观：
HTML 代码：
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
CSS 代码：
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
注意: 示例中有一些基础的样式，但我在这里没有写出来，因为这对 CSS 网格布局没有任何影响
如果这段代码让你感到困惑，我建议你去好好读下我的这篇文章 Learn CSS Grid in 5 minutes ，其中就详细的解释了布局的基础知识。
让我们让列开始具有自适应特性吧。
CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。
让我们将每一列更改为一个 fraction 单位宽:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}
结果是栅格布局将会把整个宽度分成三个 fraction，每列占据一个 fraction 单位，效果如下：
如果我们将grid-template-columns的值更改为1fr 2fr 1fr，第二列的宽度将会是其它两列的两倍。总宽现在是四个 fraction 单位，第二列占据两个 fraction 单位，其它列各占一个 fraction。效果如下：
总的来说，fraction 单位值将使你可以很容易的更改列的宽度。
然而，上面列子并没有给出我们想要的响应性，因为网格总是三列宽。我们希望网格能根据容器的宽度改变列的数量。要做到这一点，你必须学习如下三个概念：
repeat()
首先我们学习repeat()函数。这是一个强大的指定列和行的方法。让我们使用repeat()函数来更改网格:
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}
在上面代码中，repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度，因此它将为我们提供与开始时完全相同的布局：
然后是auto-fit。让我们跳过固定数量的列，将3替换为自适应数量：
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}
效果如下:
现在，栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px，我们将永远没法获得所需的弹性，因为它们很难填充整个宽度。正如你在上图看到的，网格通常在右侧留有空白。
为了解决上述问题，我们需要minmax()。我们将 100px 替换为 minmax(100px, 1fr)，代码如下：
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}
请注意，所有响应都发生在一行 css 代码中
效果如下：
正如你所见，效果完美。minmax()函数定义的范围大于或等于 min， 小于或等于 max。
因此，现在每列将至少为 100px。但如果有更多的可用空间，栅格布局将简单地将其均分给每列，因为这些列变成了 fraction 单位，而不是 100px。
添加图片
最后一步是添加图片。这与 CSS Grid 布局无关，但让我们看下代码。
我们在每个网格中添加一个图片标签：
<div><img src="img/forest.jpg"/></div>
为了使图片适应于每个条目，我们将其宽、高设置为与条目本身一样，我们使用object-fit:cover。这将使图片覆盖它的整个容器，根据需要，浏览器将会对其进行裁剪。
.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
效果如下：
ok！现在你已经了解了 CSS Grid 布局中最复杂的概念之一了，请给自己一个赞吧。
浏览器兼容性
在结束本文前，我提下浏览器支持情况，在撰写本文时，全球77%的网站将支持 CSS Grid，而且比例还在逐步攀升。
我想想2018将是 CSS 网格布局的元年。它将获得突破，并成为前端开发者的必备技能，就像过去几年 CSS Flexbox 布局发生的情况一样。
辑导语：利用响应式网页设计创建网页布局，设计将能够更好地适配不同的屏幕和尺寸。那么，随着设计行业的不断更迭，未来响应式网页设计又可能会怎么发展？本篇文章里，作者就“响应式网页设计”的发展问题做了解答，一起来看一下。
如果你和我一样一直在网页设计行业，你知道一件事即将发生，唯一不变的就是变化。大约每10年，我们做事的方式就会发生根本性的转变，这对于超越我们之前所做的事情至关重要……我们即将再次跨入下一个阶段。
在千禧年来临之前，我们首先开始在单一视图屏幕中进行UI设计，这类屏幕在当时最流行的尺寸是640×480。大多数时候，我们甚至没有考虑让屏幕滚动，而是在特定区域或文本局部区块中设置了内部滚动条。
毋庸置疑，当时的大部分网页也是用Flash或HTML创建的，并带有用于布局的表格。那是在智能手机出现之前，随着事物的发展，我们经历了第一个向“响应式”设计的根本转变。我们已经走了很长一段路，CSS已得到长足的发展，“响应式”网页设计从2010年开始才真正获得了专有工具。
随着CSS3的发布，我们获得了对“媒体查询”（Media Queries）的访问权限（译者注：随着移动互联网的兴起，我们需要适配多种移动端设备，这就需要用到Media Queries，即“媒体查询”），此后不久，Ethan Marcotte在2009年底创造了“响应式设计”一词。
十多年来，我们一直使用“响应式网页设计”（RWD）创建网页布局，作为一种网页设计方法，仅需基于一种屏幕尺寸进行设计，“响应式”使我们的设计能够适配各种设备和屏幕尺寸。
在早期，当移动电话还不兼容媒体查询或JavaScript时，“移动优先”和”渐进式增强”的概念就成为了非常流行的方法，当时有很多CSS完全不受支持。
用我们今天的话来说响应式设计，我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时，我们使用“媒体查询”来更改整个页面布局。
很快，使用这种“响应式”设计方法可能会被认为与使用表格进行页面布局一样过时——就像我们在90年代所做的那样。
我们通过基于viewport（视口）的“媒体查询”获得了许多强大的工具，但我们也缺乏很多适配的可能性，因为“媒体查询”是一个适用于整个页面的通用解决方案，并且对每个用户来说都一样。我们缺乏响应“用户需求”的能力，也缺乏将“响应式”样式注入“组件”本身的能力。
当我们谈到组件时，这里指的是页面上的“元素”，这些元素可以由其它“元素”的集合组成。
例如卡片、横划卡或推荐模块之类的UI内容，每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information（全局视口信息）来设置这些组件，但它们仍然无法拥有自己的风格。当我们的设计系统是基于“组件”的而不是基于“页面”的时，这使得它变得更加困难。
好消息是这个生态系统正在发生变化，而且它正在迅速变化，这需要我们进行一些思维转变：考虑如何设计和定义组件样式以及它们如何适应周围环境。
CSS正在不断发展，“响应式”网页设计的新时代即将到来。从目前的情况来看，自从我们第一次引入 “响应式网页设计”（RWD）以来，仅仅10多年的时间，这个生态系统已经准备好迎接CSS发生一些相当大的改变。
让我们深入研究一下可以期待哪些类型的变化，这会如何改变我们的设计方法，以及我们如何考虑界面设计。
简单来说，我们可以期待新的基于偏好的“媒体查询”来帮助我们更好地“响应”用户。它们将使我们能够根据用户自己的特定偏好或需求来设定网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。
这绝不是一个完整的列表，但能给你一些想法，这些基于偏好的“媒体查询”可能包括：
这些将帮助我们构建更具活力和个性化的网页体验，专门满足我们用户的专属需求，尤其是那些希望网站易于访问的用户。
更进一步说，这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。
举个例子，当用户的操作系统偏好设定为“减少动效”时，他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好，并为其他人提供“动效增强”的体验。
另一个流行的媒体查询是@prefers-color-scheme（配色偏好设定），它允许我们根据用户的偏好和操作系统中的设置将我们的设计更改为“亮色模式”或“暗色模式”。这不依赖于用户需要手动来更改“暗色模式”，它会自动发生。
CSS 中最令人兴奋的新兴领域之一是“容器查询”（container queries），通常也称为“元素查询”。从基于“页面”的“响应式”设计到基于“容器”的“响应式”设计的转变对发展“设计系统”的作用价值不容低估，尽管今天使用它并不安全，但重要的是要了解其发展方向。
简而言之，“容器查询”将允许我们基于“父级容器”而不是整个页面来设置规则。这意味着任何组件都更加独立，与现代设计系统保持一致，真正成为“即插即用”模块，可以转移到任何页面或布局，而且无需根据新环境重新考虑所有内容。
“容器查询”为我们如何规划、设计和构建特定组件提供了一种更加动态的方法，因为组件本身拥有它的响应信息。
甚至Ethan Marcotte自己也表达了为什么“容器查询”如此重要，我们应该研究一下。
由于各种“形态因素”（form factors）的变化和扩展，例如新的屏幕类型，可折叠屏，我们需要“媒体查询”来考虑这些场景。在这里提到的所有内容中，请记住，这是最具实验性的，并且只是一项正在进行的工作，仍在尝试解决我们可能遇到的任何复杂问题，同时考虑未来“形体因素”可能会如何发展。
在可折叠屏场景中，原型中有一些“媒体查询”可以让你定位屏幕跨度以及我们如何让内容根据新环境进行适配。例如，你可以在一个屏幕上放置一个收起的侧边栏（或菜单），并允许内容在另一个屏幕上展开并随页面滚动。
我知道你在想什么，我们已经从事网页设计并使用“响应式”来进行网页设计10余年了。我们对其相当满意，那么为什么要改变呢？
如果我们真的以终局视角来看响应式设计，那么它就是关于个人用户的用户体验设计。我们正朝着一个与每一位个体用户高度相关的时代迈进。我们的网页体验应该去适应用户的需求偏好。随着设计系统的发展以及我们如何创建更便携的网页，诸如“容器查询”之类的工具将变得非常有意义。
配图：CSS 将基于各个层级来确定用户的最佳体验
考虑到这一点，这意味着我们现在可以使用基于页面的媒体查（包括跨越屏幕的细微差别）来设计宏观布局；使用容器查询的组件设计微观布局；使用基于用户偏好的媒体查询，根据用户独特的偏好和需求定制用户体验。
对于新的响应式设计，有许多新概念正在被原型化和概念化——请看下面的延伸阅读。
所有这些协同工作的方式需要我们从根本上转变我们对设计和用户独特体验的看法。我们需要更加适应这样一个事实：即我们的设计不是静态的，不仅在布局上，还有在用户可获得的体验中，我们需要学会在这种模糊性中做出计划。网页和设计的未来变得越来越复杂，我们需要适应和挑战自己，理解“新响应式”体验的意义。
进一步了解
本文原作者：FrancoisBrill
作者：百度MEUX，百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计
本文由 @百度MEUX 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于CC0协议
*请认真填写需求信息，我们会在24小时内与您取得联系。
