html移动端适配方案总结

---

html移动端适配方案总结

---

最近学习了移动端的项目顺带着了解了下移动端布局 发现布局适配是个很重要的问题 其中有几个需要注意的点

border 1px处理

在做div样式设置边框时发现边线总是比1px看起来要粗 发现px其实是个相对单位 取决于屏幕dpr 需要根据dpr进行等比放大然后transform scale()缩小回原来大小才能正确显示
通用布局如下

border1px(width=1px, color=#ccc, style=solid, radius=0)
  position relative
  &::after
    position absolute
    top 0
    left 0
    bottom 0
    right 0

    z-index 999

    content ''

    border-width width
    border-color color
    border-style style
    border-radius radius

    @media (max--moz-device-pixel-ratio