fluid mask 3
您是Web开发的初学者吗？您是否希望在不学习任何框架的情况下使网页具有响应能力？您是否曾被指示要在没有任何框架的情况下使页面具有响应性？
让我们面对现实吧，从事Web开发事业可能既有趣又累。 您必须学习很多技术，需要了解如何使用很多工具，并担心很多概念。 如果您遇到这种情况，我的建议是一次采取一步。 您会遇到的那些概念之一就是响应能力。
让我们来谈谈响应能力
响应速度是使您的网页在任何屏幕尺寸（所谓的视口）上看起来都不错的过程。 这意味着构成您的网页的所有组件都安排得井井有条，无论呈现屏幕的屏幕大小如何。
在用microverse学习HTML和CSS 5周后，我遇到了这个概念。 我曾经相信我们只能通过开发人员选择的特定框架来实现响应。 当我听到流畅的布局和媒体查询时，整个事情有了另一个层面。
什么是流体布局？
流体布局是一种设计类型，其中网页及其组件的布局会随着屏幕尺寸而调整大小。 换句话说，网页
随着屏幕尺寸的增大或减小进行调整。
通过使用百分比（％）作为度量单位而不是像素或其他单位，在CSS中实现流体布局。 当使用像素和其他单位时，页面的布局是固定的，但是当使用百分比时，页面会变得流畅。 例如，width: 14%;width: 14px;流畅width: 14px;是固定的。
媒体查询又是什么？
此技术在CSS3中引入。 它使用不同的屏幕断点来更改CSS声明。 本质上，其目的是改变在手机，平板电脑，台式机等上访问时网页某些组件的外观。
当满足条件时，使用@media规则执行此代码以执行CSS代码块。
我该如何开始？
对于这个概念的演示，我将使用两个文件：index.html和fluid.css文件。 在index.html中，下面的meta标记必须包含在<head>标记内。 这是为了确保浏览器以不同的屏幕尺寸呈现响应：
< metaname = "viewport"content = "width=device-width,initial-scale=1.0" >
接下来，让我们在index.html文件的主体中输入以下代码。
< div class = "div-container" >< header >< h2 > Media Queries and Fluid Layouts </ h2 ></ header >< main >< article class = "one-third" >< h4 > Span One-Third </ h4 >< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Facilisi etiam dignissim diam quis enim lobortis. </ p ></ article >< article class = "one-third" >< h4 > Span One-Third </ h4 >< p > Urna molestie at elementum eu facilisis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac.Volutpat ac tincidunt vitae semper quis lectus. Imperdiet proin fermentum leo vel. </ p ></ article >< article class = "one-third" >< h4 > Span One-Third </ h4 >< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Facilisi etiam dignissim diam quis enim lobortis. </ p ></ article ></ main >< footer >< p >By: < a href = "/teekaytech" target = "_blank" > Taofeek </ a > .</ p ></ footer ></ div >
在上面的代码中，带有div-container类的<div class="div-container">标记是父容器。 我有3个小节，分别命名为页眉，主要和页脚。 主要部分有3篇文章。
注意：
处理响应性时，我可以决定先实现更大的屏幕，然后再缩小其他屏幕尺寸。 也有可能先实现小屏幕，然后逐步实现大屏幕。 出于本文的目的，我将首先为较大的屏幕实现，然后逐步扩展到较小的屏幕。
存在具有不同屏幕尺寸的不同设备。 对于本文，我将使用4个断点（常见屏幕组的宽度），它们是：
智能手机等超小型设备（最小0px，最大479px）
我们仅在媒体查询语句上指定最大宽度，如下所示：
@media screen and (min-width: 480px) and (max-width: 767px)@media only screen and (max-width: 479px)小型设备，例如纵向平板电脑，大型手机等（最小480px，最大767px）
@media screen and (min-width: 768px) and (max-width: 1023px)大型/超大型设备，例如台式机，笔记本电脑（最小1024px以上）。
同样，我们只需要在媒体查询中指定最小宽度：
@media only screen and (min-width: 1024px)
继续，让我们尝试为页面中的元素提供一些基本样式。 在我的fluid.css文件中，我具有以下代码行：
.div-container {margin : 0 5% ;}
首先，我为父容器声明了一些水平边距。 我没有使用像素，而是使用了5％，这意味着父div的左右边距应该共享屏幕总大小的5％...好吧？
article {display : inline-block;color : darkgreen;}.one-third {margin-right : 3% ;width : 30% ;}.one-third :last-child {margin-right : 0 ;}
接下来，由于我是从大屏幕开始的，所以我希望所有文章都放在同一行（100％）。<article>元素是一个block元素，我首先将文章的显示属性更改为inline-block，然后将每篇文章的右边距声明为3％。 另外，我指定每篇文章应占整行的30％。 最后在这里，我使上一篇文章的右边距为0。在这个级别上，对于所有屏幕尺寸，我的页面都是这样的：
对于较大的屏幕（1024像素及以上），以上方法是可以的。 但是由于我正在处理媒体查询，因此我也将为更大的屏幕更改CSS声明。
@media only screen and (min-width: 1024px ) {article {font-weight : bolder;}}
我要做的就是打开上面指定的媒体查询，然后将所有愿意更改其值的声明放入媒体查询语句中。 在这里，我只更改了所有文章的字体粗细，以使大于1024px的大屏幕的字体更粗体。
让我尝试为我的fluid.css文件中的大屏幕（最小768px，最大1023个像素）更改其中一些属性。 为此，我将使用以下代码段：
@media screen and (min-width: 768px ) and (max-width: 1023px ) {article {color : darkred;}}
只要屏幕尺寸在768px和1023px之内，上面的代码段就会将所有文章的颜色更改为深红色。 这是媒体查询的魔力！
注意：在媒体查询语句中还有其他指定最小和最大宽度的方法/方法，但是在本文中我将坚持使用此方法。
接下来，我将对另一个屏幕尺寸（最小480px，最大767px）实施新的更改。
@media screen and (min-width: 480px ) and (max-width: 767px ) {article {color : blue;display : block;}.one-third {width : 95% ;}}
在这里，对于指定的屏幕尺寸，我将所有文章的颜色更改为蓝色。 我也将显示声明更改为block，因为我希望每篇文章都放在单独的行中。 最后，我将每篇文章的宽度更改为95％。 输出如下所示：
最后，对于超小屏幕（最大479px），我使用了以下声明：
@media only screen and (max-width: 479px ) {article {color : black;}.one-third {width : 97% ;}}
在上面的代码段中，对于指定的屏幕尺寸，我将所有文章的颜色更改为黑色，然后将每篇文章的宽度增加为每行的97％。 输出如下所示：
完整的代码：
HTML（index.html）
<!DOCTYPE html>< html lang = "en" >< head >< meta charset = "UTF-8" >< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >< link rel = "stylesheet" href = "fluid.css" >< title > Fluid Layout / Media Queries </ title ></ head >< body >< div class = "div-container" >< header >< h2 > Media Queries and Fluid Layouts </ h2 > </ header >< main >< article class = "one-third" >< h4 > Span One-Third </ h4 >< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Facilisi etiam dignissim diam quis enim lobortis. </ p ></ article >< article class = "one-third" >< h4 > Span One-Third </ h4 >< p > Urna molestie at elementum eu facilisis. Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac.Volutpat ac tincidunt vitae semper quis lectus. Imperdiet proin fermentum leo vel. </ p ></ article >< article class = "one-third" >< h4 > Span One-Third </ h4 >< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Facilisi etiam dignissim diam quis enim lobortis. </ p ></ article ></ main >< footer >< p >By: < a href = "/teekaytech" target = "_blank" > Taofeek </ a > .</ p ></ footer ></ div ></ body ></ html >
CSS（fluid.css）
.div-container {margin : 0 5% ;}article {display : inline-block;color : darkgreen;}.one-third {margin-right : 3% ;width : 30% ;}.one-third :last-child {margin-right : 0 ;}@ media only screen and (max-width: 479px ) {article {color : black;}.one-third {width : 97% ;}}@ media screen and (min-width: 480px ) and (max-width: 767px ) {article {color : blue;display : block;}.one-third {width : 95% ;}}@ media screen and (min-width: 768px ) and (max-width: 1023px ) {article {color : darkred;}}@ media only screen and (min-width: 1024px ) {article {font-weight : bolder;}}
综上所述，在媒体查询中使用流畅的布局是开发响应式广告的快速方法
几乎没有或根本没有并发症的网页。 是的， bootstrap ， materialize ， Foundation等框架以更快的方式实现了响应能力。
但是，媒体查询有助于了解大多数框架的构建基础。 要了解更多信息，请查看w3school关于媒体查询和流畅布局的资源。
在LinkedIn，Twitter，GitHub上与我联系
编码愉快！
翻译自: /css3-fluid-layout-and-media-queries-a-simple-approach-to-responsive-web-design-7r463vs3
fluid mask 3
