设计responsive页面时的注意点:

  1. 使用media query增加breakpoint来实现responsive.
  2. 永远以mobile设计优先。
  3. 设计组件时经常长宽使用百分比。
  4. 如果需要设置一些长宽固定数值时,使用em作为单位是个不错的选择。然后针对字体大小设置对应的em大小。以字体作为参照物。

参考文档:

  • https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
  • https://www.w3.org/TR/css3-mediaqueries/

发表评论