北京做网站：如何使用元素查询构建响应式UI组件

2019.08.02 mf_web

199

元素查询使我们能够根据容器的特征来塑造元素; 宽度，高度等。但值得指出的是，元素查询还远远没有成为CSS标准，我们可能需要等待几年才能发生这种情况。

北京做网站因此，目前，我们将不得不求助于JavaScript库来模拟类似的功能，例如  EQCSS。

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>

现在，让我们构建一些东西！

HTML

我们将构建一个用户配置文件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和介质。

CSS

首先，我们将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工作组是采用它还是创建自己尚未确定的。尽管如此，我期待这个想法被采纳并彻底改变我们再次建立网站的方式。

北京做网站

相关推荐
分享： 1 2 3

关键词

手机网站制作手机网站建设企业网站建设做网站价格医疗网站建设营销网站建设网站建设哪家好网站制作方案企业网站制作如何制作网站江门网站优化专业网站建设网站制作公司

热门分享

最新文章

随机推荐

最新案例

联系电话 400-6065-301
在线咨询

留言