199
元素查询使我们能够根据容器的特征来塑造元素; 宽度,高度等。但值得指出的是,元素查询还远远没有成为CSS标准,我们可能需要等待几年才能发生这种情况。
北京做网站因此,目前,我们将不得不求助于JavaScript库来模拟类似的功能,例如 EQCSS。
EQCSS是由Tommy Hodgins开发的JavaScript库 。让我们看看选择这个库的一些原因。
首先,EQCSS为我们提供了与CSS3 Media Queries标准类似的语法 @element 声明。这适用于样式表或嵌入 style 元素中,因此非常直观。例如,在下面的代码中,我们将导航中的菜单堆叠起来以应对导航(而不是视口)缩小的空间。
1 2 3 4 五 6 7 8 | .navigation .menu { display: inline-block; } @element ".navigation" and ( max-width: 480px ) { .navigation .menu { display: block; } } |
EQCSS提供的不仅仅是基于宽度或基于高度的查询。它还提供基于计数的查询,使我们能够根据内容应用样式规则; 包含的字符数,行数和元素数。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 | .tweetContent { // textarea background-color: #eaeaea; } @element ".tweetContent" and ( min-characters: 100 ) { .tweetContent { background-color: #ffc04d; // orange } } @element ".tweetContent" and ( min-characters: 140 ) { .tweetContent { background-color: #FF3333; // red color: #fff; } } |
它支持不同的CSS单位,其中包括最近加入像 vw, vh, vmin,和 vmax。
对于那些仍然需要IE8支持的人来说,EQCSS提供了一个 polyfill。
EQCSS可通过Bower,NPM,CDNJS直接从Github的存储库获得。选择适合您项目部署的任何插座,并确保将其加载到您的页面中。
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.2.1/EQCSS.min.js"></script> |
现在,让我们构建一些东西!
我们将构建一个用户配置文件UI组件,我们从HTML标记开始。
01 02 03 04 05 06 07 08 09 10 11 | <div class="user-profile"> <div class="user-profile__avatar"> <img src="path/to/profile/image.jpg" alt="Louie R. Avatar Image" width="160" height="160"> </div> <div class="user-profile__summary"> <h3 class="user-profile__name">Louie R.</h3> <h4 class="user-profile__location">Middle Earth</h4> <p class="user-profile__bio">A developer and frequent StackOverflow reader. Born, raised, and live on the Web. I speak three languages: HTML, CSS, and JavaScript.</p> <button class="user-profile__button button button--primary">Follow</button> </div> </div> |
我们的组件包括一个头像图片,用户名,他们居住的地方,短传和“关注”按钮 点菜 Twitter和介质。
首先,我们将UI组件容器宽度和显示模式设置为 flex。以下代码段中的flexbox语法为了清晰起见没有前缀,因此它仅适用 于最新的浏览器。如果需要,您始终可以使用 Autoprefixer 生成 较旧的语法 以及供应商前缀以支持旧版浏览器。
1 2 3 4 五 | .user-profile { width: 100%; max-width: 640px; display: flex; } |
接下来,我们设置头像图像和包含名称,位置和简短传记的配置文件摘要之间的宽度比例。
01 02 03 04 05 06 07 08 09 10 | .user-profile__avatar { width: 25%; max-width: 120px; flex: 1 1 120px; } .user-profile__summary { width: 75%; padding-left: 25px; font-size: 1em; } |
我们还略微调整了用户名和位置的字体大小。
1 2 3 4 五 6 7 | .user-profile__name { font-family:'Montserrat', sans-serif; font-size:1.3125em; } .user-profile__location { font-size:0.87em; } |
这些是演示元素查询如何工作的主要样式规则。风格规则,如background-colour文字colour,box-shadow完全符合您的口味。就我而言,它看起来如下。
使用EQCSS的元素查询非常直观。如上所述,语法非常类似于CSS媒体查询。首先,正如我们之前所示,我们表示一个元素查询, @element 后面跟着 一个或多个元素选择器 和查询条件,例如元素的宽度,高度,滚动位置等。
1 2 3 | @element 'header, nav, footer' and ( min-width: 100px ) and ( min-height: min-height: 300px ) { // Style rules } |
我们现在可以将它部署到我们的UI组件中,例如,在容器内调整元素的宽度,并在容器宽度减小时调整字体大小。
1 2 3 4 五 6 7 8 | @element '.user-profile' and ( max-width: 540px ) { .user-profile { font-size:0.75em; } .user-profile__avatar { max-width:80px; } } |
此外,我们希望UI组件可以重复使用,更重要的是,无论可用宽度如何,都可以在网站的任何部分显示。例如,侧边栏的宽度通常小于 400px。在这种情况下,由于宽度要窄得多,我们必须 重新调整 组件的整个布局。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 | @element '.user-profile' and ( max-width: 380px ) { .user-profile { padding-top: 30px; padding-bottom: 30px; display: block; text-align: center; } .user-profile__avatar, .user-profile__summary { width: 100%; } .user-profile__avatar { margin-right: auto; margin-bottom: 20px; margin-left: auto; } .user-profile__summary { padding-left: 0; } } |
在本教程中,我们构建了一个UI组件来显示用户配置文件。它是响应式的,根据其容器而不是视口而改变。您可以 查看演示页面 ,看看无论视口大小如何,布局都会移动。整齐!
这只是一个例子。还有 一些其他例子 指出了 元素查询有意义的地方。
记得; 本教程中的语法完全基于EQCSS - 无论W3C工作组是采用它还是创建自己尚未确定的。尽管如此,我期待这个想法被采纳并彻底改变我们再次建立网站的方式。
北京做网站
热门分享
最新文章
2019.08.24
北京建站:整洁的着陆页更好的设计和更高的转化率
2019.08.16
北京高端建站:如何在Web设计项目中使用淡色
2019.08.16
北京企业网站开发:移动设备和响应式设计模式
2019.08.16
北京网站建设:分析材料设计组件的经验教训
2019.08.16
北京网页设计:使用Hero Header充分利用您的设计
2019.08.16
北京网站建设:WordPress的六个最佳备份插件
2019.08.15
北京做网站:编写转换的博客文章的7个技巧
2019.08.15
北京网站开发:降低跳出率并提升转化率的12个技巧
2019.08.15
北京网站优化:您的电子商务转换率如此之低的20个原因
2019.08.15
北京网站设计:2019年有效访客博客策略的终极指南
随机推荐
2019.08.24
北京建站:整洁的着陆页更好的设计和更高的转化率
2019.08.13
北京高端建站:设计实施的九项原则
2019.08.16
北京网站建设:分析材料设计组件的经验教训
2019.07.11
北京网站建设:提高前端性能的9种方法
2019.08.16
北京网站建设:WordPress的六个最佳备份插件
2019.08.14
北京网站优化:白帽与黑帽SEO之如何成为搜索引擎英雄
2019.05.22
北京建站:给WordPress内容一个语法检查的3种有用的工具
2019.08.14
北京企业网站建设:13个创意Hello Bar示例证明可以促进转换
2019.08.13
北京做网站:介绍网站速度测试图像分析工具
2019.08.13
北京企业网站建设:如何使用隐私设计框架保护您的用户