css判断不同分辨率显示不同宽度布局实现自适应宽度

实现 CSS 判断不同分辨率显示不同宽度布局的关键技术是通过 CSS 媒体查询（Media Query），其中，媒体查询是通过检测设备特性和浏览器特性来判断采用何种样式表进行渲染，从而使得同一份 HTML 代码用户依然可以获得最佳的用户体验。下面是实现该技术的完整攻略：

1. 首先，需要使用 meta 标签指定页面宽度和缩放。常见的 meta 标签形式如下：

   html
<meta name="viewport" content="width=device-width, initial-scale=1">

   其中，width=device-width 表示页面宽度等于设备宽度，initial-scale=1 表示初始缩放比例为 1。

2. 通过媒体查询来判断不同分辨率设备采用不同的样式表进行渲染。媒体查询可以在 CSS 中通过 @media 规则来实现，语法形式如下：

   css
@media mediatype and (expression) {
CSS-Code;
}

   其中，mediatype 表示媒体类型，如 all、print 等，expression 表示条件表达式，可以检测屏幕宽度、高度、方向、像素比等特性，CSS-Code 表示应用在符合条件的设备上的 CSS 样式。

   例如，在屏幕宽度为 720px 以下的设备上采用 100% 宽度布局，在屏幕宽度为 720px 至 960px 的设备上采用 50% 宽度布局，在屏幕宽度为 960px 以上的设备上采用 30% 宽度布局，可以使用以下代码：

   ```css
   / 手机设备 /
   @media screen and (max-width: 720px) {
   div {
   width: 100%;
   }
   }

   / 平板设备 /
   @media screen and (min-width: 720px) and (max-width: 960px) {
   div {
   width: 50%;
   }
   }

   / PC设备 /
   @media screen and (min-width: 960px) {
   div {
   width: 30%;
   }
   }
   ```

3. 可以在代码中加入min-height和max-height属性，让页面根据不同高度进行自适应调整。

   ```css
   / 低分辨率 /
   @media screen and (max-width: 480px) and (max-height: 800px) {
   div {
   width: 100%;
   }
   }

   / 高分辨率 /
   @media screen and (min-width: 481px) and (max-width: 960px) and (min-height: 801px) and (max-height: 1024px) {
   div {
   width: 50%;
   }
   }

   / 超大屏幕 /
   @media screen and (min-width: 961px) {
   div {
   width: 30%;
   }
   }
   ```

   通过这样的方式也可以让样式更加灵活，更好的适配不同分辨率范围下的屏幕显示问题。

总之，通过使用 CSS 媒体查询，可以让页面根据不同分辨率设备采用不同的样式表进行渲染，使得用户在不同设备上都能够获得最佳的用户体验。