【CSS笔记】一些CSS的基础（随手更新）

2022年3月29日 985点热度 0人点赞 0条评论

PC端与移动端的适配问题

响应式布局

同一页面在不同屏幕尺寸下有不同的布局，实现不同屏幕分辨率的终端上浏览网页的不同展示方式。

1.设置meta标签

例如：

viewport：即视口，表示网页的可视区域；
width：控制 viewport 的大小，可以指定一个具体的值，例如 600，也可以是由关键字组成的特殊值，例如 device-width 就表示设备的宽度；
initial-scale：表示初始缩放比例，也就是页面第一次加载时的缩放比例；
maximum-scale：表示允许用户缩放的最大比例，范围从 0 到 10.0；
minimum-scale：表示允许用户缩放到最小比例，范围从 0 到 10.0；
user-scalable：表示用户是否可以手动缩放，“yes”表示允许缩放，“no”表示禁止缩放。

2.媒体查询

根据指定的条件，针对不同的媒体类型（screen print）定义不同的 CSS 样式，让使用不同设备的用户都能得到最佳的体验。

@media (min-width: 321px) and (max-width: 375px) {
  /*宽度范围321~375 显示为红色*/
  body {
    background: red;
  }
}
@media (min-width: 376px) and (max-width: 425px) {  
  /*宽度范围376~425 显示为黄色*/  
  body {  
    background: yellow;  
  } 
}