移动互联网终端

　　最近一直在做移动端的页面，发现很多的坑，这里做一下总结，填填坑…… css常见的问题（一） 一、iOS键盘首字母自动大写 　　IOS的机子，默认英文输入法状态下，首字母是自动大写的，有时候挺烦人的。 　　在iOS中，默认情况下键盘是开启首字母大写的功能的，如果业务不想出现首字母大写，可以这样： <input type="text" autocapitalize="off" /> 二、iOS输入框默认内阴影和样式问题 　　在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭，不过加了上面的属性后，iOS下默认还是带有圆角的，不过可以使用 border-radius属性修改： input, textarea { border: 0; -webkit-appearance: none; } 三、andriod输入框type = "number"存在样式问题 去除input[type=number]的默认样式 input[type=number] { -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance:

原作者：https://segmentfault.com/a/1190000013857582 1.HTML HTML5新特性，语义化 浏览器的标准模式和怪异模式 xhtml和html的区别 使用data-的好处 meta标签 canvas HTML废弃的标签 IE6 bug，和一些定位写法 css js放置位置和原因 什么是渐进式渲染 html模板语言 meta viewport原理 2.CSS 盒模型，box-sizing CSS3新特性，伪类，伪元素，锚伪类 CSS实现隐藏页面的方式 如何实现水平居中和垂直居中。 说说position，display 请解释*{box-sizing:border-box;}的作用，并说明使用它的好处 浮动元素引起的问题和解决办法？绝对定位和相对定位，元素浮动后的display值 link和@import引入css的区别 解释一下css3的flexbox，以及适用场景 inline和inline-block的区别 哪些是块级元素那些是行级元素，各有什么特点 grid布局 table布局的作用 实现两栏布局有哪些方法？ css dpi 你知道attribute和property的区别么 css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？ 流式布局如何实现，响应式布局如何实现 移动端布局方案 实现三栏布局（圣杯布局，双飞翼布局

　 　 前言 　　　　首先你要知道 vw 和 rem 是什么？怎么使用？ 　　　 　①： 简单来说 vw 是视口单位，相当于把视口等分成了 100 ， 1vw = 1 ; 　　　　 ②：rem 是相对单位，设置根元素 html 的 font-size ，比如给 html 设置字体大小为 100px ， 1rem = 100px ; 　　　　 注： 我之前针对 vw 和 rem 分别写过一篇博客，详见如下 　　　　　　 vw： https://www.cnblogs.com/tu-0718/p/9906692.html 　　　　　　 rem： https://www.cnblogs.com/tu-0718/p/9146631.html 　　 　　 正文 　　　 还记得第一次知道 rem 时，我的心情如沐春风，感觉找到了新大陆 　　　 那时常为移动端写自适应页面而苦恼，传统的百分比布局和媒体查询早已让我心力交瘁 　　　 百分比布局的缺点： 宽度虽然能随屏幕自适应，但高度固定不变，当设备屏幕越来越大，会有一种被强行拉伸的既视感，用户体验差 　　　 媒体查询的缺点：CSS 代码量增多，体积增大，要为每一个不同分辨率的设备单独写一套样式来自适应，这样的话我宁愿狗带 　　　　 在这种情况下， rem 的出现无异于黑暗中的一道曙光，不过它也有一个缺点 　　　 rem的缺点： 需要引入一段 JS

队名: 拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长：宋奕 过去两天完成了哪些任务 准备beta冲刺的内容和分工 修改了后端的一些bug GitHub签入记录 接下来的计划 维护后端代码，跟进组员完成进度，学习后端架构，学习深入python，解决匿名拨打电话问题，实现套牌多结果处理，准备beta版本的答辩 还剩下哪些任务 维护后端代码，跟进组员完成进度，学习后端架构，学习深入python，解决匿名拨打电话问题，实现套牌多结果处理，准备beta版本的答辩 燃尽图组内共享 遇到了哪些困难 维护数据库结构 有哪些收获和疑问 体会到打代码的快乐 如何提高后端数据的安全性？ 组员1：杨晋南 过去两天完成了哪些任务 完善了移动端Android部分界面间逻辑代码 github签入记录 接下来的计划 学习Android应用开发进阶，精进移动端Android界面的实现，拍照功能的完善，准备beta版本的答辩 还剩下哪些任务 学习Android应用开发进阶，精进移动端Android界面的实现，拍照功能的完善，准备beta版本的答辩 燃尽图组内共享 遇到了哪些困难 按钮触发的灵活性问题 有哪些收获和疑问 学习到了有关界面逻辑代码的注意点 如何更好地暗示组长请客？ 组员2：刘晓翔 过去两天完成了哪些任务 完善了移动端iOS部分界面间逻辑代码 GitHub签入记录 接下来的计划

1.主要介绍几个移动端常用的单位rem、vw、vh，配合传统的px、百分比、<viewport>标签，兼容适配移动端的各种分辨率的手机端。 　　rm : 这个单位是以父元素为标准来进行计算 ， 例如：父元素 font-size:16px; 子元素 ： font-size:0.875em ; 则子元素 font-size: 0.875*16 　　rem ： 而这个单位是以 root 根元素标准来计算的。 　　vw ： 屏幕宽度相关，1vw是屏幕宽度的1% 　　vh ： 屏幕高度相关，1vh是屏幕高度的1% 2. 用 rem 进行 移动端适配 　　 　　定义html一个标准样式,当宽度为 320px 时候，根font-size 为16 px; 　　html{ 　　　　width:320px; 　　　　font-size : 16px; 　　} 　　 　　我们可以得到 1rem = 16px; 　　html{ 　　　　font-size:16px; 　　　　width:20rem 　　} 　　 　　那么当屏幕为 400 时候呢？我们的 width 还应该是 20rem; 　　这个时候我们就要计算出 1rem 为多少(也就是 html 的 font-size为多少 )； 　　1rem = 400/320*16 , 所以得到 　　html{ 　　　　font-size : (400/320

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 2019进入尾声，表哥表姐每天沉浸于开发移动端报表不可自拔，面对业务需求迎难而上，一路斩妖除魔，只为开发出一张张优质的报表。 表哥表姐日夜操劳，废寝忘食，似乎离业务部门的需求还是有一点点距离.... ps：我太难了！！！ 我们来咯，本次移动端更新秉承着两大原则： 业务需求开发简单，报表呈现精致美观 接下来小编带着大家一起来看下这些直击痛点的移动端新功能，从此看报表就像刷抖音！ 单选按钮组样式 手机屏幕“寸土寸金”，tab块不够灵活，如果样式复杂，切图做图也是麻烦事，如何高效开发多维度数据展示的移动端模板？ 本次上线移动端专属单选按钮组样式，十分钟实现图片效果，三种样式任意选择。 日期日历样式 实际业务场景中会经常使用日期作为一个维度来查看不同数据，目前来看切换日期比较麻烦，控件展现也不够美观。 移动端专属日期日历样式来咯，美观与易用性兼得，小屏幕也可以大放异彩。 新增多种目录样式 除默认的九宫格目录样式外，本次移动端上线卡片式目录、折叠式目录、tab标签目录等多种目录样式，根据报表结构和数量合理选择目录样式，你想要的，我们都有。 目录插入模板 目录上方想要展示模板数据？ 主页和目录合二为一，上方展示关键指标，下方呈现目录样式，目录插入模板，给你更多的选择 H5悬浮工具栏 预览模板时底部一般会有菜单栏

前言 最近在写移动端 H5 应用，遇到一个值得记录下来的点。现在从它的由来到实现，我们来聊一下移动端 1px，说 1px 不够准确，应该说成 1 物理像素 。 通过阅读下面文章，你将会理解以下问题： 问题 为什么有 1px 这个问题？ 实现 1px 有哪些方法？这些方法分别有哪些优缺点？ 开源项目中使用的哪些解决方案？ 如何在项目中处理 1px 的相关问题？ 由来 基本概念 首先，我们要了解两个概念，一个是 像素（pixel） 可以简写为 px ，另外一个是 设备像素比（DPR） 像素 ：指在由一个数字序列表示的图像中的一个最小单元，单位是 px，不可再次分割了。 设备像素比（DPR）: 设备像素比 = 设备像素 / 设备独立像素。 下面我来简单解释下几个概念 CSS 像素 (虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对单位以及相对单位。px 是一个相对单位，相对的是设备像素。 设备像素 (物理像素)：指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，和屏幕尺寸大小有关。 设备独立像素 (逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: CSS 像素)，这个点是没有固定大小的，越小越清晰，然后由相关系统转换为物理像素。

目录 移动web介绍和两种开发方式(响应式开发方式 原生的开发方式) 响应式的原理(CSS3的媒体查询) 响应式开发框架(Bootstrap) 的介绍和基本信息-优势-版本 了解框架和库的区别 主导者不一样 入门Bootstrap 起步 下载和引包 阅读Bootstrap的文档 了解常用的全局CSS样式 和 组件 和JS插件 搭建项目目录结构 创建主页引包 设置网页字体和空结构 字体图标的生成 和使用 总结 移动web前言 移动web ： 移动端手机浏览器或者微信里面浏览的 网页 移动APP ： 手机上需要下载安装的 应用程序 1. 移动web介绍 1.1 响应式开发 一套代码运行多个终端 优点:开发快 维护快 适配好 缺点加载速度慢 1.2 纯原生移动web开发 一套代码运行一个端 优点: 加载速度快 缺点开发慢 维护慢 适配差 1.3 应用场景 : 响应式开发用在一些新建的网站(PC和移动同时出来) 对加载速度要求不是很高 纯原生移动web开发 一般会用在一些已经有PC端上线的网站 再次开发移动端 移动端需要加载速度很快的网站 2. 响应式开发原理 2.1 CSS3的媒体查询： 通过查询屏幕的的宽度来指定某个宽度区间的网页布局 2.2 常见设备的屏幕宽度 超小屏幕（手机） 768px以下 小屏设备（平板） 768px-992px 中等屏幕（旧式电脑） 992px-1200px

一、背景 1.1 AoE是什么 AoE (AI on Edge) 是一个滴滴开源的终端侧AI集成运行时环境(IRE)。以 “稳定性、易用性、安全性” 为设计原则，帮助开发者将不同框架的深度学习算法轻松部署到终端高效执行，Github 地址是 https://github.com/didi/aoe 。 为什么要做一个 AI 终端集成运行时框架，原因有两个： 一是随着人工智能技术快速发展，这两年涌现出了许多运行在终端的推理框架，在给开发者带来更多选择的同时，也增加了将AI布署到终端的成本； 二是通过推理框架直接接入AI的流程比较繁琐，涉及到动态库接入、资源加载、前处理、后处理、资源释放、模型升级，以及如何保障稳定性等问题。 目前AoE SDK已经在滴滴银行卡OCR上应用使用，想更加清晰地理解 AoE 和推理框架、宿主 App 的关系，可以通过下面的业务集成示意图来了解它。 1.2 终端推理框架一览 下面是终端运行的8种主流推理框架（排名不分先后）。 序号 名称 开发者 开源时间 描述 1 TensorFlow Lite Google 2017 TensorFlow Lite使用Android Neural Networks API，默认调用CPU，目前最新的版本已经支持GPU。 2 Core ML Apple 2017 Core

视觉窗口： viewport，是移动端特有的，这是一个虚拟的区域，承载网页。 承载关系 浏览器----->viewport--------->网页 适配要求 1.网页宽度必须和浏览器保持一致 2.默认显示的缩放比例和PC端保持（缩放比例1.0） 3.不允许用户自行缩放网页 以上为国际上通用的适配方案，标准的移动端适配方案 适配设置 如果任何设置都没有，默认走的就是viewport的默认设置 去设置新的viewport设置，达到设置要求。 设置视口的标签，在head里面并且应该紧跟着编码设置 viewport功能 * 1. width 可以设置宽度 (device-width 当前设备的宽度) * 2. height 可以设置高度 * 3. initial-scale 可以设置默认的缩放比例 * 4. user-scalable 可以设置是否允许用户自行缩放 * 5. maximum-scale 可以设置最大缩放比例 * 6. minimum-scale 可以设置最小缩放比例 * 在<meta name="viewport" content=""> content="" 使用以上参数 * * 标准的适配方案：content="width=device-width,initial-scale=1.0,user-scalable=0" 快捷键：meta:vp + tab 非主流的适配方案