优化@media 查询的最佳方式

Question

我一直致力于使我的网站对媒体查询具有移动响应能力。但是当宽度减少 50px 时必须调整每个元素是非常累人的。我有太多媒体查询，希望缩短我的代码。使用媒体查询的最佳方式是什么？还是有更好的替代方案来构建我的响应式设计？

Answer 1

您可以使用 CSS 变量。然后在 @media 内更改变量如下。

:root{
    --font: 12px; 
}
.title{
    font-size: calc(var(--font) + 10px); 
}
.subtitle{
    font-size: calc(var(--font) + 5px); 
}
@media only screen and (max-width: 700px){
    :root{
        --font: 15px; 
    }
}

https://www.w3schools.com/css/css3_variables.asp

处有一个 w3schools 文档

Answer 2

在我看来，最好的响应方式是使用属性、属性、单位...相对。

您可以使用 box-sizing: border 来避免重新计算内容的宽度和高度。 @media screen编码时可以使用rem, percentage来改变元素的大小。

使元素相互依赖并且仅依赖于一些初始元素，例如 font-size 或 html...将提高响应能力

你可以学习一些关于响应式初学者 JS 项目的教程

https://www.youtube.com/watch?v=FazgJVnrVuI&ab_channel=BrianDesign

https://www.youtube.com/watch?v=3-2Pj5hxwrw&ab_channel=BrianDesign

优化@media 查询的最佳方式

Best way to optimize @media queries

css