如何解决是否可以在不同屏幕上查看页面?
我需要一个可以更改主页布局的代码,以便在不同的PC显示器中查看。 我已经尝试过“响应式Web设计”,但是我不知道是否有一种方法可以使它不仅显示在不同的设备上,而且可以显示在不同的PC屏幕尺寸上?预先感谢。
解决方法
css的 media 标签是您可能要研究的标签。
w3c here的报价:
@media
规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。媒体查询可用于检查许多内容,例如:
视口的宽度和高度
设备的宽度和高度
方向(平板电脑/手机处于横向还是纵向模式?)
分辨率
使用媒体查询是一种流行的技术,用于向台式机,笔记本电脑,平板电脑和手机提供定制的样式表(响应式网页设计)。
当您指代其他PC显示器时,我假设您指的是不同的宽度/长度,宽高比或分辨率。我还假设您的情况是,您想以不同的分辨率以不同的样式显示内容,但是所有内容都在PC监视器上(例如720p或1080p或4k监视器)显示,下面的代码可能会有所帮助。
/* On screens that are 992px wide or less,go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less,make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
,
正如caoool所述,Media Queries是您要寻找的。 基本上,如果分辨率大于或小于特定值,则可以使用媒体查询编写自定义CSS。
仅供参考,有一个名为Bootstrap的很棒的开源CSS框架,它使响应式网站的设计变得更加容易和轻松。
有关框架的更多信息,请查看Bootstrap Documentation和Bootstrap Examples。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。