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