移动web开发适配rem

移动web:
1.html5页面
2.跨平台
3.告别ie,基于webkit
4.对手机端的适配性和性能要有更高的要求。因为安卓手机尺寸不一,手机端网络状况更加复杂

在移动页面更多的是使用:
1.定高,宽度百分比
2.flex布局
3.媒体查询

image.png

css媒体查询适配:
大家不要这样写css媒体查询,根据顺序不同效果也是不同的,这不是我们希望的


image.png

而是写成这样


image.png

js适配:


image.png

rem适配页面实战:
1.与sass结合
sass的安装,使用,配置手把手教你:https://www.jianshu.com/p/ce6294d07f57
模拟iphone6 宽375的屏 所以37.5

image.png

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • title: 移动端Web页面适配浅析date: 2018-01-31 16:38:01tags: 移动端 适配 ...
    豆板儿阅读 14,230评论 0 16
  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,647评论 5 80
  • 不知不觉做前端已经两年了,从PC端,移动端,微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技...
    是ADI呀阅读 8,328评论 0 10
  • 为什么你敢怒不敢言? 生活中,我们常常会碰到很多事,即使觉得自己应该说出来或主动的站出来,但我们却往往没那么做。 ...
    Skyline11阅读 6,357评论 0 2
  • 性、爱、婚姻、金钱,这无非就是男女之间那点事,我曾经在上篇文章中说过,这个顺序在我心里到底是怎样的排列…今天我先来...
    Mandy_CD阅读 3,693评论 1 2

友情链接更多精彩内容