[分享]css兼容笔记本分辨率

CSS 作为网页设计中关键的一环，需要在不同分辨率的笔记本电脑上良好兼容。首先，我们需要了解不同分辨率的笔记本电脑有哪些常见分辨率：1366 x 768 1440 x 900 1920 x 1080 ...

CSS 作为网页设计中关键的一环，需要在不同分辨率的笔记本电脑上良好兼容。

首先，我们需要了解不同分辨率的笔记本电脑有哪些常见分辨率：

1366 x 768
1440 x 900
1920 x 1080
2560 x 1440 

在设计网页时，我们需要注意以下几点：

1. 百分比和 em/rem 尺寸单位

.container{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
@media screen and (max-width: 768px){
  .container{
    max-width: 100%;
    padding: 0 20px;
  }
} 

使用百分比和 em/rem 尺寸单位可以让网页元素相对于父元素自适应。

2. 图片和视频大小控制

img{
  max-width: 100%;
  height: auto;
}
video{
  max-width: 100%;
  height: auto;
} 

通过限制图片和视频的最大宽度来保证它们不会超出其容器，从而避免出现溢出问题。

3. 响应式布局

@media screen and (max-width: 768px){
  .left{
    float: none;
    width: 100%;
    margin-right: 0;
  }
  .right{
    float: none;
    width: 100%;
  }
} 

通过使用 @media 查询，我们可以针对不同的屏幕尺寸应用不同的样式。

总的来说，合理地运用 CSS，我们就可以让网页在不同分辨率的笔记本电脑上有良好的兼容性。