为移动视图正确设置 CSS 样式？答案

【问题标题】：Correctly styling CSS for mobile view?为移动视图正确设置 CSS 样式？
【发布时间】：2019-08-21 06:18:32
【问题描述】：

我目前如何为所有元素设置样式：

#pandora {
  position: absolute;
  top: 63%;
  left: 51.5%;
  width: 9%;
}

#tidal {
  position: absolute;
  top: 68%;
  left: 40.5%;
  width: 5%;
}

问题是，这是我在观察我的百分比，我认为这不会针对移动设备优化它（我需要）。那么，我应该如何正确设置元素的样式？

【问题讨论】：

你肯定不想对你的每一个元素都使用position: absolute，而且要求这样任意的百分比是非常不寻常的。显然，您最终想要的结果只有您自己知道，但您可能想要的是使用position: relative 以及float、margin 和类似的东西。您可以使用 media queries 设置断点以在移动设备上应用不同的样式，但可能会受益于像 Bootstrap 这样的框架（它为您完成了艰苦的工作）。
Bootstrap 会以什么方式处理这一切？
鉴于您似乎希望所有内容都居中对齐，您可以将text-align: center 用于文本元素，将margin: 0 auto 用于其他元素:) 像 Bootstrap 这样的框架将您的布局划分为一个网格，其中您指定希望元素占用多少列。把它想象成用乐高积木。它们会自动处理所有的边距和内边距，并且可以针对不同的屏幕尺寸自动调整。
我以前使用过 Bootstrap，但不太记得了。您能否添加评论，给我一些关于如何使用 Bootstrap 工作的起始代码？

标签： html css

【解决方案1】：

按照以下链接练习引导程序。

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

对于响应式网站，您需要学习引导程序的网格系统。它是引导程序中最重要的部分。网格系统使您的系统布局具有响应性。

但是，也需要媒体查询。有时您的内部数据在响应式布局中看起来并不好。在那个时候，您需要使用媒体查询来设计一个更好看的网站。

以下是一些媒体查询，您可以根据设备大小放置 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 */    

}

【讨论】：

那么如何将媒体查询与 Bootstrap Grid 结合起来呢？因为我认为 Bootstrap Grid 为不同的设备提供了自动调整大小。
嗨 @ex240 ，当使用 Bootstrap 时，它会生成网站的响应式布局。但有时会有一些数据，如段落或字体、填充、边距等。它需要其他 CSS 代码才能在其他或小型设备中看起来不错，因此当时使用媒体查询来使内部数据响应。其余的其他布局 Bootstrap 使其具有响应性。

【解决方案2】：

首先，使用引导网格系统 (col-md-*) 将您的元素设置为在大屏幕和小屏幕之间缩放。如果您需要仅针对移动视图进行任何样式设置，或者如果您需要覆盖现有的移动 CSS 属性，请参阅媒体查询。

参考资料：

引导网格：https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
媒体查询：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

@media only screen and (max-width: 767px) {  
   /* CSS for mobile view goes in this media query*/  
   #spotify-player {
     position: absolute;
     top: 75%;
     left: 34.5%;
   }
    
   #apple {
     position: absolute;
     top: 65.8%;
     left: 46%;
     width: 4%;
   }
}

【讨论】：