Xin's blog Xin's blog
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)

Xin

英雄可不能临阵脱逃啊~
首页
  • 前端文章

    • HTML
    • CSS
    • JavaScript
    • Vue
    • 组件与插件
    • CSS扩展语言
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • 前端框架面试题汇总
  • 基本面试题
  • 进阶面试题
  • 其它
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 前后端联调
  • mock.js
  • 奇技淫巧
  • 分类
  • 标签
  • 归档
关于
GitHub (opens new window)
  • 前端框架面试题汇总

  • 基本面试题

  • 进阶面试题

    • NodeJS
    • 性能和效率
    • 移动端布局与适配
      • 一、iscroll安卓低版本卡顿,如何解决?
      • 二、移动布局自适应不同屏幕的几种方式
      • 三、请说下移动端常见的适配不同屏幕大小的方法?
      • 四、你们做移动端平时在什么浏览器上测试?
      • 五、ICONFONT使用及其利与弊?
      • 六、说说移动端Web分辨率
    • Web安全
    • 混合开发
    • 架构
    • 前端工程化
    • 组件设计
    • 单元测试
  • 其它

  • 面试
  • 进阶面试题
ctrlwin
2021-03-29

移动端布局与适配

# 一、iscroll安卓低版本卡顿,如何解决?

方案—:iScrollv5.1.3 设置momentum: true 方案二:配置probeType 方案三:开启硬价加速:给scroll元素增加css样式:—webkit—transform:translate3d(0,0,0); 方案四:判断手机版系统版本,应用原生CSS: overflow:scroll—y

# 二、移动布局自适应不同屏幕的几种方式

(1) 响应式布局 (2) 100%布局(弹性布局) (3) 等比缩放布局(rem)

# 三、请说下移动端常见的适配不同屏幕大小的方法?

响应式布局 简而言之,就是页面元素的位置随着屏幕尺寸的变化而变化,通常会用百分比来定位,而在设计上需要预留—些可被“压缩”的空间。 Cover布局 就跟background—size的cover属性—样,保持页面的宽高比,取宽或高之中的较小者占满屏幕,超出的内容会被隐藏。此布局适用于主要内容集中在中部,边沿无重要内容的设计。 Contain布局 同样,也跟background—size的contain属性那样,保持页面的宽高比,取宽或高之中的较大者占满屏幕,不足的部分会用背景填充。个人比较推荐用这种方式,但在设计上需要背景为单色,或者是可平铺的背景。

# 四、你们做移动端平时在什么浏览器上测试?

Chrome,Safari,微信X5, UC,其他手机自带浏览器 一百一十五、 说说移动端是如何调试的? 移动端调试: (1) 模拟手机调试 (2) 真机调试之android手机+Chrome (3) 真机调试之 iphone+ safari ⑷UC浏览器 (1) 微信内置浏览器调试 (2) debuggap (3) 抓包 详细参考:https://segmentfault.eom/a/1190000005964730

# 五、ICONFONT使用及其利与弊?

把—些零散的icon做成字体。我们调用文字的时候,渲染出来的就是icon图像,这样的显示就是iconfont(字体图标) 好处:

  1. iconfont图像放大后,不会失真。

  2. iconfont节省流量

  3. iconfont在颜色变幻方面很简单 缺点:

  4. iconfont不能支持—个图像里面混入多重颜色

  5. iconfont的使用没有使用图片那么直接,简单。 详细参见:https://segmentfault.com/a/1190000005904616? ea=953657

# 六、说说移动端Web分辨率

从以下几个方面做答: (1) pc到移动,渲染的变迁 (2) 可以更改的布局宽度 (3) 再次变迁的像素 (4) 又—次变迁 (5) 是时候说说安卓了 详细参见:https://segmentfault.com/a/1190000005884985

在GitHub上编辑 (opens new window)
上次更新: 4/27/2021, 11:18:01 AM

← 性能和效率 Web安全→

最近更新
01
createElement函数创建虚拟DOM
05-26
02
clipboard 剪切板属性
05-26
03
vue的权限管理
05-16
更多文章>
Theme by Vdoing | Copyright © 2021-2022 Xin | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×