分享我使用的CSS自适应写法
CSS自适应写法主要是通过媒体查询（Media Query）来实现的。媒体查询可以让我们根据设备的屏幕尺寸应用不同的样式规则。例如，我们可以为小于600px宽度的设备设置一套样式，而为大于600px宽度的设备设置另一套样式。这样，我们的网页就能在不同设备上呈现出良好的用户体验。此外，我们还可以使用百分比、vw/vh等单位来实现更加灵活的自适应布局。总之，CSS自适应写法是一种非常实用的技术，可以帮助我们快速构建出适应各种屏幕尺寸的网页。
在写CSS前，需要在页面上<head>内加上如下代码，
<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
禁止页面缩放，如果自动缩放了就不能触发CSS自适应代码了。
然后是自用的CSS自适应代码，大家根据注释自行修改。
1280分辨率以上（大于1200px）@mediascreenand(min-width:1200px){#page{width:1100px;}}1100分辨率（大于960px，小于1199px）@mediascreenand(min-width:960px)and(max-width:1199px){#page{width:960px;}}880分辨率（大于768px，小于959px）@mediascreenand(min-width:768px)and(max-width:959px){#page{width:900px;}}720分辨率（大于480px，小于767px）@mediaonlyscreenand(min-width:480px)and(max-width:767px){#page{width:450px;}}440分辨率以下（小于479px）@mediaonlyscreenand(max-width:479px){#page{width:300px;}}基本常用分辨率都覆盖了，大家只需要按照这个框架慢慢调整就行。
