[分享]css分辨率自适应6

CSS分辨率自适应是一个能够让网页在各种不同分辨率的设备上拥有良好显示效果的技术，而CSS3的媒体查询功能可以帮助开发者实现分辨率自适应的网页设计。/ 针对不同分辨率设备设定不同样式 / media ...

CSS分辨率自适应是一个能够让网页在各种不同分辨率的设备上拥有良好显示效果的技术，而CSS3的媒体查询功能可以帮助开发者实现分辨率自适应的网页设计。

/* 针对不同分辨率设备设定不同样式 */
@media screen and (max-width: 320px) {
  body {
    font-size: 12px;
    background-color: #FFF;
    color: #000;
  }
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  body {
    font-size: 14px;
    background-color: #EEE;
    color: #333;
  }
}

@media screen and (min-width: 769px) {
  body {
    font-size: 16px;
    background-color: #DDD;
    color: #666;
  }
} 

以上代码展示了如何利用媒体查询来实现分辨率自适应。当设备分辨率小于或等于320px时，文本字号变为12px，背景色为白色，文本颜色为黑色；当设备分辨率在321px到768px之间时，文本字号变为14px，背景色为浅灰色，文本颜色为深灰色；当设备分辨率大于或等于769px时，文本字号变为16px，背景色为深灰色，文本颜色为中灰色。

通过这种方式，开发者可以根据设备的分辨率，实现网页在各种设备上都具有良好的显示效果，提高用户体验，同时也提升了网站的可用性与易用性。