CSS移动端适配

前言

现在很多前端项目都是移动优先，要不就是移动端样式也需要一套。总之，移动端的样式适配是少不了的。

1、布局

Bootstrap 的栅格系统，CSS的flex布局，grid布局，都能通过调整布局来适配移动端的窄屏幕

2、CSS媒体查询

使用CSS媒体查询，设定移动端的样式

例如：

@media screen and (max-width: 425px) {}
@media screen and (min-width: 426px) and (max-width: 750px) {}
@media screen and (min-width: 751px) and (max-width: 1200px) {}

以上设置了三个媒体查询，分别有其作用范围

3、适配单位

桌面端常用的px单位，放在各种尺寸的移动设配上，大小、比例都会大变样。按设计稿等比例得呈现是最理想的

• 元素的尺寸可以使用百分比、vw、vh等来表示

• 使用rem

em表示当前元素的字体大小，1em = 1倍字体大小

而rem表示根元素的字体大小

于是，我们可以使用rem来表示字号、行高、内外边距等

具体参考：css移动端适配 - rem适配方案

设计稿是750px，使用1：100的比例设置rem：

1 rem = 100 * (clientWidth / 750) + 'px'

屏幕宽度为750px时，1rem = 100px

屏幕宽度为1500px时，1rem = 200px

屏幕宽度为375px时，1rem = 50px

假设设计稿是750px，那么，

18px的字体大小可以在对应的媒体查询中设置为0.18rem

20px的边距可以设置为0.2rem

诸如蓝湖等网站的设计图都可以方便的设置rem，将px自动换算为rem

注意

设置根元素(html)字体大小，部分元素继承该字号，可能会出现意料外的样式。设置该元素字号为12px或0都能解决问题

不过，为了根本上解决这个问题，可以设置body的字号为12px。这样，rem不会影响部分元素的字号继承

4、总结

一般桌面和移动端会各自一套设计稿，不可共用的样式需要写两套。两套样式需要注意优先级问题，不建议为了这个目的去添加!important。选择器相同的情况下，媒体查询放后面，自然会覆盖前面的样式

例如：

<style lang="scss" scoped>
.container {
  padding: 20px;
  .content-title {
  	font-family: 'HelveticaNeue-Bold';
  	font-weight: bold;
  	font-size: 30px;
  	line-height: 36px;
  }
}
@media screen and (max-width: 750px) {
  .container {
  	padding: 0.2rem;
  	.content-title {
  	  font-size: 0.3rem;
  	  line-height: 0.36rem;
  	}
  }
}
</style>

如果无需考虑桌面端，可以直接采用rem的适配方案，能在不同的移动设备上展现同设计稿一样的样式

大尺寸屏幕下，rem会让样式放大过度，失去了设计的味道。