我基本上希望我的网页可以在几乎所有移动设备上投放,包括很小的屏幕尺寸。
这已经有效,我正在CSS中使用媒体查询来为不同大小的显示实现不同的样式。
但是,我现在的操作方式感觉有点“模糊”。
例如,请参见以下代码:
@media only screen and (max-width: 550px) {
.pageStyleEdition{
text-align: left;
margin-left:0%;
margin-right:0%;
width: 80%;
}
.displayFlexStyle{
display: flex;
flex-direction: column;
}
}
@media only screen and (max-width: 290px) {
.pageStyleEdition{
text-align: left;
margin-left:0%;
margin-right:0%;
max-width: 60%;
}
.displayFlexStyle{
display: flex;
flex-direction: column;
}
}
这里有很多冗余,因为我基本上只是用各个屏幕尺寸的不同宽度值一遍又一遍地重写css类,所以我真的想避免这种情况。
有什么简单的方法可以说:“如果屏幕尺寸小于X,则动态缩小宽度,使其仍适合屏幕!”?
最佳答案
请记住CSS的级联组件:例如,当您具有适用于最大宽度550px的屏幕的样式时,它也适用于最大宽度为290px的屏幕。从这个意义上讲,第二个选择器可以变得更简单:
@media only screen and (max-width: 550px) {
.pageStyleEdition{
text-align: left;
margin-left:0%;
margin-right:0%;
width: 80%;
}
.displayFlexStyle{
display: flex;
flex-direction: column;
}
}
@media only screen and (max-width: 290px) {
.pageStyleEdition{
max-width: 60%;
}
}
关于css - 如何“优化” div对屏幕尺寸的宽度适应?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55592316/