需求
实际开发中,分辨率不同的情况下需要不同的样式等等…但是组件库在很多情况下一些细节并不能实现,这个时候使用媒体查询也是不错的选择
实现
比如在不同分辨率下实现不同的字体大小:
<!DOCTYPE html>
<html>
<head>
<!--
手机端的时候需要替换为这句话
<meta name="viewport" content="width=device-width, initial-scale=1"/>
-->
<meta charset="utf-8">
<title>字体不同</title>
<style>
/* 默认的大小----------------------------------------- */
p {
font-size: 36px;
}
/* 分辨率大于1900px的样式------------------- */
@media (min-width: 1900px) {
p {
font-size: 30px;
}
}
/* 分辨率大于1300px的样式------------------- */
@media (min-width: 1300px) {
p {
font-size: 24px;
}
}
</style>
</head>
<body>
<p>不同分辨率下,有不同的字体大小</p>
</body>
</html>
使用vue的情况下也可以用的。
如有错误,麻烦指出,谢谢各位!