css如何自适应手机屏幕

CSS（Cascading Style Sheets，层叠样式表）是一种用于定义HTML元素样式的语言，它可以为HTML提供很多的样式和布局支持，并且可以被应用到不同尺寸和类型的设备上。在这篇文章中，我们将探讨如何使用CSS来实现网页在不同手机屏幕上的自适应。

@media screen and (max-width: 767px) {
   /*屏幕宽度小于等于767px的设备*/   body {
          font-size: 16px;
   }
   .container {
          width: 100%;
   }
   /*其他样式*/}
@media screen and (min-width: 768px) and (max-width: 991px) {
   /*屏幕宽度在768px到991px之间的设备*/   body {
          font-size: 18px;
   }
   .container {
          width: 90%;
   }
   /*其他样式*/}
@media screen and (min-width: 992px) {
   /*屏幕宽度大于等于992px的设备*/   body {
          font-size: 20px;
   }
   .container {
          width: 80%;
   }
   /*其他样式*/}
    

如上代码所示，可以使用CSS媒体查询来针对不同的屏幕尺寸设定不同的样式。上述代码中，我们按照屏幕宽度的范围，设置了三个不同的媒体查询，分别为小于等于767px、768px到991px之间和大于等于992px的屏幕。对于每个媒体查询，我们可以针对需要样式修改的元素进行样式调整，例如font-size和width等属性。

需要注意的是，在编写CSS时，尽量使用相对单位，避免使用固定像素值。相对单位（如em、rem、%等）可以根据屏幕大小来调整大小，能更好地实现自适应效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！