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单位,放在各种尺寸的移动设配上,大小、比例都会大变样。按设计稿等比例得呈现是最理想的

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

  • 使用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会让样式放大过度,失去了设计的味道。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值