我目前如何设置所有元素的样式:
#pandora {
position: absolute;
top: 63%;
left: 51.5%;
width: 9%;
}
#tidal {
position: absolute;
top: 68%;
left: 40.5%;
width: 5%;
}
问题是，这是我在关注我的百分比，我认为这并没有针对移动设备(我需要)进行优化。那么，我应该如何正确设置元素的样式？
最佳答案
请点击以下链接练习 bootstrap。
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
对于响应式网站，您需要学习 Bootstrap 的网格系统。它是 Bootstrap 中最重要的部分。 网格系统使您的系统布局响应迅速。
但是，也需要媒体查询。有时你的内部数据在响应式布局中看起来不太好。届时您需要使用媒体查询来设计外观更好的网站。
下面是一些媒体查询，你可以根据设备大小放置你的CSS代码。
<style>
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
/* Your CSS Code for this device size */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
/* Your CSS Code for this device size */
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
/* Your CSS Code for this device size */
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
/* Your CSS Code for this device size */
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
/* Your CSS Code for this device size */
}
/* According to Mobile Orientation */
@media only screen and (orientation: landscape) {
/* Your CSS Code for this device orientation */
}
关于html - 为移动 View 正确设置 CSS 样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57566512/