移动互联网终端

今天做了个pc的页面，看了别人的网站在手机端能把pc端的网页刚好缩放到手机端，看着很舒服。 于是想把自己的页面也这样搞一下，刚开始，想到的是利用css3的缩放来做，想的是当屏幕尺寸改变时缩放整个页面，这样顺便写了个代码，但是在手机端却没有效果，然后仔细一想，手机端屏幕是不会变化的，根本无法触发window.onresize方法，再说，这样做了之后，在pc端改变屏幕尺寸后，页面是跟着缩放的，但是别人的网站在pc端改变屏幕尺寸时，是不会变化的，所以这样做肯定是错误的。 然后开始百度，看到一条评论，只需要把下边这段代码去掉就行了 <meta name="viewport" content="width=device-width,initial-scale=1.0"> ！！！ 试了一下，在页面中写的一个width=1200px的元素，能够恰到其份的适配下来！！！缩放的刚刚好 下面来了解一下meta标签中这些值的含义： width=device-width：表示布局viewport的值是设备的宽度（也可以是特定的viewport值） initial-scale=1.0： 设置页面的初始缩放比例 minimum-scale=1.0： 设置页面的最小缩放比例 maximum-scale=1.0：设置页面的最大缩放比例 user-scalable=no： 设置用户是否可以缩放操作

一、与其他框架的比较 Vue是一个“渐进式框架”（The Progressive Framework） 对比Angular 更灵活的适用场景 1、默认API适合纯前端背景的开发者/小块灵场景 2、配合TypeScript也可以适合传统Java后端背景的开发者/大型项目 更低的培训成本，更快的上手速度 底层的Virtual DOM在高级场景下提供更多的灵活性 大型应用中与TypeScript的整个不如Angular，但是在vue3.0会针对性的增强 对比React 对大部分常见场景都提供了事实标准方案 1、不需要额外自行调研选取方案 2、在必要的情况下也可以换用自研方案 模板提供更有好的学习曲线 同事暴露底层Virtual DOM 用于高级场景（也支持JSX） 大型应用中与TypeScript的整个暂时不如React，3.0会针对增强，尤其是TSX 对标React 16+ 1、Vue同样可以实现类似于Hooks的逻辑复用机制 2、3.0支持时间分片 与其他所有框架的区别 自带的响应式系统（Reactivity System） 1、类似于MobX，但与框架本身的整合更无缝 2、在复杂组件树中提供比 React 更精确的更新侦测 3、3.0将暴露更多底层响应式API 单文件组件（Single File Components） 1、HTML的自然延伸，符合直觉的代码组织方式 2

UI设计需要学习哪些软件？如何成为高薪UI设计师？有互联网的地方就有UI设计，更值得一提的是UI设计入行简单，薪资却可以媲美程序员。但成为高薪UI设计师并不容易，你需要具备扎实的理论功底并熟练掌握各种设计工具。 UI设计要学哪些软件? PS：主要用于制作UI设计中界面和图标设计，是最主流的设计工具，无论什么职位的设计师，都必须掌握PS。 AI：主要用于制作UI设计中的图标设计，也可以对UI中的一些引导页的插画图进行设计。AI图标和界面功能很好，可根据尺寸放大缩小，矢量图输出，可用来设计交互草图。 AE：主要用于制作UI设计中的交互动效，在现今的UI产品中很多都是需要用动效。 ARP：主要用于制作UI设计中的原型图、线框图、流程图的设计。 DW：网页设计工具，编写查看代码的同时可以设计网页、嵌入flash、管理网站后台等，可绘制图形。 参加UI专业的学习怎么样? 参加专业的学习，你不仅能够快速掌握UI设计师常用的软件，还可以获得其他收获。比如： 1、造型训练与基础课程。意在培养学生们的对素描的基础了解和色彩绘图原理的掌控，通过临摹素描和色彩搭配的学习，提升学生对造型能力的掌控。 2、设计工具与品牌形象设计。通过学习学生可以掌握基本软件的使用，视觉识别系统的学习与制作以及平面设计的工作流程。 3、Web与运营设计。意在让学生掌握Web端设计规范、前端设计流程

disabled样式覆盖问题 IOS 移动端 input设置了 readonly 后仍然能被聚焦，后更改为 disabled . 延伸了一个新问题,禁用状态下字体颜色设置无效 12345678910111213141516 input[disabled],input:disabled,input[disabled="disabled"] { color: #000 !important; background: #fff !important;}// 样式设置没有起作用// 正确样式设置 input[disabled], textarea[disabled],select[disabled='disabled']{ -webkit-text-fill-color: rgba(0, 0, 0, 1); // 用于改变字体color opacity: 1; // 浏览器默认为0.3，所以得改为1 color: rgba(0, 0, 0, 1); background: white;} 300ms点击延迟 300ms点击延迟，用FastClick.js 扩展：FastClick.js实现原理，在document上绑定touchstart,touchstart,记录当前信息，阻止默认行为，创建一个自定义鼠标事件对象(type: click)，并触发该事事件，执行click的回调函数。

1：ios下input为type=button属性disabled设置true,会出现样式文字和背景异常问题 解决方案:使用opacity=1来解决 2：对非可点击元素如(label,span)监听click事件，部分ios版本下不会触发 解决方案:css增加cursor:pointer就搞定了 3：移动端1px边框 比如按钮的box的class为btn .btn:before{ content:''; position: absolute; top: 0; left: 0; border: 1px solid #ccc; width: 200%; height: 200%; box-sizing:border-box; -webkit-box-sizing:border-box; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; } 4：在h5嵌入app中，ios如果出现垂直滚动条时，手指滑动页面滚动之后，滚动很快停下来，好像踩着刹车在开车，有“滚动很吃力”的感觉 解决方案：self.webView.scrollView.decelerationRate =

一. 认识Flutter 1.1. 什么是Flutter 先看看官方的解释： Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile , web , and desktop from a single codebase. 简单翻译一下： Flutter是谷歌主导研发的一个UI工具包，可以利用它，使用非常简洁的代码开发出漂亮的、原生的应用程序，无论是在移动端、Web端还是桌面端。 嗯，加入个人理解： Flutter就是一个UI开发工具包，可以开发各个平台，但是目前最活跃的地方依然 移动平台，虽然他也支持Web、桌面，甚至也将是 Google Fuchsia 下开发应用的主要工具。 但是现在，它只是活跃于移动端。 那么，目前移动平台主要有哪些呢？ 没错，iOS、Android ！ 于是，我们可以简单概述一下Flutter： Flutter目前被应用最广泛的就是作为iOS、Android跨平台解决方案，而且可以说是目前最优秀的跨平台解决方案。 它不仅仅性能 优越 ，而且开发非常 高效 ！ 为什么需要这样一种跨平台解决方案呢？ 待会儿我会讲到移动端开发的历史（各端独立开发到跨平台开发的出现）以及在整个历史进程中出现的各个痛点，直到Flutter的出现。

1.布局的总体结构框架： 2.注意事项： （a）：如果是左右两栏的布局方式，须在article的同级加一个aside； 因为是同级，所以必须设置同样的样式；而且他俩的父级，也就是section必须转化为弹性盒子，（因为元素在弹性盒子里面可以在一行排列）， 哪一个需要固定宽度就给他设置固定宽度，另外一个只需设置flex=1即可； 此外还需解决高度塌陷问题，将他们俩都设置 “overflow=auto //一定是auto//不能是hidden或者其他。” （b）： 常规一栏的布局，只需按部就班写出结构以上框架即可；（除去aside） 然后其css样式，所有移动端都一个模子，首先一定是 怪异盒模型 ， section{width：100%；height：100%；padding：上 0 下 0} article{width：100%；height：100%；overflow：auto } 所有在页面要呈现的东西全部写在article下面的div里面即可。 出现内容贴边现象，就只需在article里面加padding即可。 （c）： 底部 footer里面 icon图标文字字和常规文字搭配写法： 其实很简单只需将footer转换成弹性盒子，然后里面写几个图标就几个盒子，把icon字和常规文字写在每一个盒子里面， 接着将每一个盒子转换成弹性盒子， 主轴切换成竖行；“column”。 如此

原文来源： https://www.leixuesong.com/3342 Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。下面雷雪松详细的给大家介绍一下强烈推荐优秀的Vue UI组件库。 1、 iView UI组件库 iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。iView的组件还是比较齐全的，更新也很快，文档写得很详细。有公司团队维护，比较可靠的Vue UI组件框架。iView生态也做得很好，还有开源了一个iView Admin，做后台非常方便。官网上介绍，iView已经应用在TalkingData、阿里巴巴、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪、联想等大型公司的产品中。 iView官网： https://www.iviewui.com/ 2、Vux UI组件库 Vux是基于WeUI和Vue2

1. 页面滑动不流畅，一般是在盒子使用了 overflow: auto || scroll 后出现 body { 　　　　-webkit-overflow-scrolling: touch; 　　　　overflow-scrolling: touch; } 2. 点击按钮或超链接之类的 默认灰色背景色 -webkit-tap-highlight-color: rgba(0, 0, 0, 0) 3. 固定定位元素抖动 html, body { 　　height: 100%; 　　overflow: auto; } 4. 隐藏scroll滚动条 ::-webkit-scrollbar { 　　display: none; } 5. 最简单的rem自适应 众所周rem是的值是根据根元素的字体大小相对计算的，而每个设备的大小不一样，所以，根元素的字体大小要动态设置： html { 　　 font-size: calc(100vw / 3.75); } body { 　　 font-size: . 14rem; } 6. 屏幕旋转为横屏时，字体大小会变 * { 　　 -webkit-text-size-adjust: 100%; } 7. 调用设备系统的某些功能 <!-- 拨号 --> < a href= " tel:10086 ">打电话给: 10086 </ a> <!-- 发送短信 -

弹性布局(em布局/rem布局) em和rem的区别 在了解弹性布局前我们需要先知道em和rem rem： font size of the root element， rem是相对于根元素<html>来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。 em：以父节点font-size大小为参考点，标准不统一，容易造成混乱 em/rem与px的换算 浏览器的默认字体高度一般为 16px ，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器 默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。 那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？ 因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。 html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body