响应式ui_如何使用元素查询构建响应式UI组件-优快云博客

响应式ui

在本教程中，我们将继续有关元素查询的讨论，着手构建可重用的响应组件。

回顾一下，元素查询使我们能够根据容器的特征来模制元素。宽度，高度等。但是值得指出的是，元素查询距离成为CSS标准还有很长的路要走，我们可能要等上几年。

因此，就目前而言，我们将不得不使用JavaScript库来模拟类似的功能，例如EQCSS 。

均衡器

EQCSS是Tommy Hodgins开发JavaScript库。让我们看看选择该库的一些原因。

首先，EQCSS使用@element声明为我们提供了类似于CSS3 Media Queries标准的@element 。这可以在样式表中工作或嵌入style元素中，因此感觉非常直观。例如，在下面的代码中，我们将菜单堆叠在导航中，以应对导航（而非视口）的缩小空间。

.navigation .menu {
	display: inline-block;
}
@element ".navigation" and ( max-width: 480px ) {
	.navigation .menu {
		display: block;
	}
}

EQCSS不仅提供基于宽度或高度的查询。它还提供了基于计数的查询，这使我们能够根据内容应用样式规则。包含的字符，行和元素的数量。

.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中的存储库获得。选择适合您项目部署的任何出口，并确保将其加载到页面中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.2.1/EQCSS.min.js"></script>

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

HTML

我们将构建一个用户配置文件UI组件，并从HTML标记开始。

<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生成较旧的语法以及供应商前缀以支持旧版浏览器。

.user-profile {
	width: 100%;
	max-width: 640px;
	display: flex;
}

接下来，我们设置头像图片和包含名称，位置和简短传记的个人资料摘要之间的宽度比例。

.user-profile__avatar {
	width: 25%;
	max-width: 120px;
	flex: 1 1 120px;
}
.user-profile__summary {
	width: 75%;
	padding-left: 25px;
	font-size: 1em;
}

我们还略微调整了用户名和位置的字体大小。

.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表示元素查询，后跟一个或多个元素选择器以及查询条件，例如元素的宽度，高度，滚动位置等。

@element 'header, nav, footer' and ( min-width: 100px ) and ( min-height: min-height: 300px ) {
	// Style rules
}

现在，我们可以将其部署到我们的UI组件中，例如，在减小容器宽度时调整容器内元素的宽度大小并调整字体大小。

@element '.user-profile' and ( max-width: 540px ) {
    .user-profile {
        font-size:0.75em;
    }
    .user-profile__avatar {
        max-width:80px;
    }
}

此外，我们希望UI组件可重用，并且更重要的是，无论可用宽度如何，都可以在网站的任何部分中呈现。例如，侧边栏，其宽度通常小于400px 。在这种情况下，由于宽度要窄得多，我们必须重新对齐组件的整个布局。

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

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-ui-component-using-element-queries--cms-27118

响应式ui