移动端布局和适配

1.移动端布局自适应不同屏幕的几种方式。

(1).响应式布局

(2).100%布局(弹性布局)

(3).等比例缩放(rem)


2.移动端常见的适配不同屏幕大小的方法。

响应式布局:

简而言之,就是页面元素的位置随着屏幕尺寸的变化而变化,通常会用百分比来定位,而在设计上需要预留一些可被“压缩”的空间。

Cover布局:

就跟background-size的cover属性一样,保持页面的宽高比,取宽或取高之中的较小者占满屏幕,超出的内容会被隐藏。此布局适用于主要内容集中在中部,边沿无重要内容的设计。

Contain布局:

同样,也跟background-size的contain属性那样,保持页面的宽高比,取宽或取高之中的较大者占满屏幕,不足的部分用背景去填充,个人比较推荐用这种方式,但在设计上需要背景为单色,或者是可平铺的背景。


iScroll安卓低版本卡顿,如何解决。

(1).iScroll v5.1.3设置 momentum:true

(2).配置probeType

(3).开启硬价加速:给scroll增加css样式:-webkit- tiansform:translate3d(0,0,0);

(4).判断手机版系统,应用原生css:overflow:scroll-y


就到这里咯~~~~~~

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

相关阅读更多精彩内容

  • rem布局 所谓rem布局就是指为文档的根节点 元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写。...
    无名小码农阅读 5,309评论 0 0
  • 一、是什么 可以这样理解,同一套代码在不同分辨率的手机上跑时,页面元素间的间距,留白,以及图片大小会随着变化,在比...
    Viaphlyn阅读 4,155评论 1 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,865评论 0 11
  • 关于css常见问题,大多是移动端的。 简单的排版规则:条目与条目之间空两行,每条内容部分分段空一行。标点符号全部用...
    苏水儿阅读 10,491评论 0 9
  • 第一章 F12: element.style 内联样式(可以直接在上面写代码进行简单调试) user agent...
    fastwe阅读 5,480评论 0 0

友情链接更多精彩内容