北京做网站:如何使用元素查询构建响应式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工作组是采用它还是创建自己尚未确定的。尽管如此,我期待这个想法被采纳并彻底改变我们再次建立网站的方式。

北京做网站

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP