移动端布局

viewPort

  • width 可以设置HTML页面的宽度,在移动端一般设置为device-width。
  • initial-scale:初始缩放比例,第一次进入页面上的时候,整个页面的缩放比例
  • minimum-scale:2.0最小的缩放比例。最小的缩放比例是指页面最小是原来的两倍
  • user-scalable=no 设置是否允许用户缩放,no不允许缩放,Yes允许缩放。
  • maximum-scale:3.0最大的缩放比例。最大的缩放比例是指页面最大是原来的三倍

flexible

  • 引入类库 flexible 库的使用方法非常的简单,只需要在Web页面的 <head></head> 中添加对应的 <script src="build/flexible_css.debug.js"></script>
    <script src="build/flexible.debug.js"></script>
  • 把视觉稿中的 px 转换成 rem
    例如:我们把750px的稿子分成10份,也就是整个宽度为10rem ,<html>对应的font-size为75px 。
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、meta标签的效果 移动端页面一般会在head头部添加如下meta标签。 该meta标签是否添加对页面渲染的影...
    nimw阅读 3,905评论 0赞 5
  • 2018/01/22更新 之前的rem方式在页面加载的时候会有个重置css的过程,导致了初始化的时候会出现页面从小...
    WS林海峰阅读 10,747评论 8赞 28
  • 移动端布局 标签(空格分隔): 未分类 预备知识 Device Pixels 设备屏幕的物理像素,硬件指标,这个就...
    debt阅读 570评论 0赞 11
  • 这篇文章,主要是总结一下,在移动端布局用过的方法。有三种,一种是响应式布局,利用@meida判断各个size;第二...
    井皮皮阅读 560评论 1赞 2
  • 谙时 墨藏书籍中, 月伴花香凝。 光移似流水, 孤舟可留汀?
    陈言著诗随云飞阅读 242评论 0赞 3

友情链接更多精彩内容