css 如何自适应手机端 |css3的gradient

首先，在编写CSS样式时，要尽可能使用相对单位，比如vw、vh、em和rem等，而不是像素（px）单位。因为像素单位不同设备上的尺寸会不一样，会导致在不同设备上显示效果不同。

{
font-size: 1rem; /*1rem等于根元素字体大小，如16px*/
width: 50vw; /*视口宽度的50%*/
height: 50vh; /*视口高度的50%*/
margin: 1em; /*相对于父元素字体大小的1倍*/
}

其次，要确保使用响应式布局。通过@media查询，根据设备屏幕的大小为不同的设备提供特定的CSS布局，以达到响应式的效果。同时还可以利用CSS Grid和Flexbox等技术来实现布局的自适应。

.wrapper { /*使用CSS Grid*/
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /*自适应列*/
grid-gap: 1em;
}

最后，建议在开发过程中使用模拟器或真实设备测试网站的响应式效果，以确保页面在各种设备上都能正常显示。

本文介绍了CSS如何在手机端进行自适应，包括使用相对单位、响应式布局和适当测试。这些技术可以帮助大家实现页面的自适应，让网站在不同的设备上都可以展现完美的效果。