移动互联网终端 | 易学教程

移动端适配 - 原理篇

阅读更多关于移动端适配 - 原理篇

移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题： 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... 上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等。本文将从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理。一、英寸一般用英寸描述屏幕的物理大小，如电脑显示器的17、22，手机显示器的4.8、5.7等使用的单位都是英寸。英寸和厘米的换算：1英寸 = 2.54 厘米二、物理像素 2.1 像素像素即一个小方块，它具有特定的位置和颜色。图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。像素可以作为图片或电子屏幕的最小组成单位。 2.2 物理像素到电商网站购买手机，都会看一看手机的参数，以apple的官网上对手机分辨率的描述为例： iPhone XS Max 和 iPhone SE的分辨率分别为2688 x 1242和1136 x 640。表示手机分别在垂直和水平上所具有的像素点数。这里描述的就是屏幕实际的物理像素，即一个屏幕具体由多少个像素点组成。屏幕从工厂出来那天起

介绍推荐优秀的Vue UI组件库

阅读更多关于介绍推荐优秀的Vue UI组件库

Vue 是一个轻巧、高性能、可组件化的MVVM库，API简洁明了，上手快。从Vue推出以来，得到众多Web开发者的认可。在公司的Web前端项目开发中，多个项目采用基于Vue的UI组件框架开发，并投入正式使用。开发团队在使用Vue.js框架和UI组件库以后，开发效率大大提高，自己写的代码也少了，很多界面效果组件已经封装好了。在选择Vue UI组件库的过程中，通过GitHub上根据star数量、文档丰富程度、更新的频率以及维护等因素，也收集整理了一些优秀的Vue UI组件库。下载资源： www.yinxiangit.com 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.x开发的移动端UI组件库，主要服务于微信页面。Vux的定位已经很明确了，一是

从事UI设计要懂哪些知识专业UI学习路线是什么

阅读更多关于从事UI设计要懂哪些知识专业UI学习路线是什么

从事UI设计要懂哪些知识？专业UI学习路线是什么？UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计，随着互联网的高速发展以及用户体验度的提高，几乎所有的互联网企业都在招聘UI设计师，从业人员的薪资也水涨船高。很多人想转行从事UI设计，不过究竟需要学什么呢? 从事UI设计要学什么?分析UI设计师的工作内容你会找到答案。目前UI设计师的工作主要包括这些：负责软件界面的美术设计、创意工作和制作工作;根据各种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计;对页面进行优化，使用户操作更趋于人性化;维护现有的应用产品;收集和分析用户对于GUI的需求。知道了UI设计师的工作内容，我们就可以分析UI设计需要掌握的技能：对软件工具(PS、AI、AE等)的掌握，手绘素描基础，创意性思维的培养以及用户分析理解。想要快速掌握这些，参加专业的学习，你将会学到这些内容： 1)造型训练与基础课程。意在培养对素描的基础了解和色彩绘图原理的掌控，通过临摹素描和色彩搭配的学习，提升你对造型能力的掌控。 2)设计工具与品牌形象设计。通过学习你可以掌握基本软件的使用，视觉识别系统的学习与制作以及平面设计的工作流程。 3)Web与运营设计。意在让你掌握Web端设计规范、前端设计流程，构图与色彩的使用原理Banner设计技巧，三维辅助画面表现和专题的设计方法，学习C4D软件。 4)网页静态布局

给手机端页面留一个调试后门吧(vue)

阅读更多关于给手机端页面留一个调试后门吧(vue)

当我们在浏览器开发vue页面时，由于浏览器对于调试有天然的支持，我们开发起来很方便。但是现在已经进入了移动端时代，移动端页面的需求越来越大。在开发移动端页面的时候我们通常是在浏览器完成开发完成，之后才在手机端测试，如果测试出现问题还得重新回到浏览器上寻找错误。甚至还有嵌入在APP的页面，经过调试之后还要重新发包。当然还有更加奇怪的现象，由于手机浏览器和Web浏览器的差异，经常会发现在Web浏览器上好好的，一到手机上就不行的情况。因此首先我们需要一个能在手机端调试的插件。如果你还在使用alert一步步来定位移动端页面bug的话，不妨试试vConsole。 vConsole vConsole是一个由微信公众平台前端团队研发的Web前端开发者面板，可用于展示console日志，方便开发、调试。可以在 vConsole.js下载地址下载所需的js。下载解压之后，在dist文件夹中找到vconsole.min.js，加入工程中： <script src="path/to/vconsole.min.js"></script> <script> // init vConsole var vConsole = new VConsole(); console.log('Hello world'); </script> 请注意， VConsole 只是 vConsole 的原型，而非一个

移动端页面开发资源总结

阅读更多关于移动端页面开发资源总结

移动端页面开发资源总结及技巧工作了有一段时间，基本上都在搞移动端的前端开发，工作的过程中遇到过很多问题，bug的解决方案，记录下来，以便后用！！！内容并不是很全，以后每遇到一个问题都会总结在这里，分享给大家！一、meta标签相关知识 1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2、移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。 <meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 3、禁止将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 4、忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 5、当网站添加到主屏幕快速启动方式

移动京东web项目--（1）静态页面完成

阅读更多关于移动京东web项目--（1）静态页面完成

（1）在浏览器和移动端能够良好展示页面,头部新增内容快捷键meta:vp+tab <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> 最后一个属性不是必要的位于 <meta charset="UTF-8">后 css样式表前（2）页面宽度随用户操作变化,且不发生变形现象装满移动端宽度 width:100%; 设置最小和最大宽度让移动端不变形 max-width:640px; min-width:320px; 通常为640和320px （3）2倍图有时图片的分辨率和大小不能很好地适配页面采用2倍图方法 background-size:200px 200px;宽度像素长度像素（4）搜索框随页面缩放长度方式改变 1flex 2margin:0 100px; 3padding:0 100px; 搜索框部分宽度参照父容器,不能人为设置具体宽度左右浮动的话没有效果 max-width: 640px; /* 不填的话浏览器会溢出 */ width: 100%; （5）使图片基线对齐不出现下方空隙 /*1.设置为块元素 2.可以将文本的字体大小设置为0 3.vertical-align:bottom*/ 其中1如果同时要使图片水平居中

Bootstrap-概述

阅读更多关于 Bootstrap-概述

Bootstrap-概述文件引入移动端优先增强跨浏览器性 v4.3 模板为： <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script

移动端开发必须知道的小技巧

阅读更多关于移动端开发必须知道的小技巧

前言最近在公司写一个混合 app 项目，页面基本全部都是用 H5 完成，嵌入到原生 webview 下。发现一个问题，在 iPhone 6 下苹果手机的状态栏会挡住页面，导致页面下移，样式错乱，最后网上查找了些解决办法，加了一条 meta 标签解决了问题。今天特来总结下常用的移动端开发需要注意的meta标签及一些小技巧。 viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 这个是移动端页面开发必备的标签，用来调整布局视口同视觉视口一致，禁止页面缩放等。 apple-mobile-web-app-capable apple-mobile-web-app-capable 是设置 Web 应用是否以全屏模式运行。语法： <meta name="apple-mobile-web-app-capable" content="yes"> 说明：如果 content 设置为yes，Web应用会以全屏模式运行，反之，则不会。content的默认值是no，表示正常显示。如果选择全屏模式运行，则会删除默认的苹果工具栏和菜单栏。我开篇遇到的问题就是通过设置该 meta 标签解决的。设置顶部状态栏的颜色 <meta

前端之移动端库和框架bootstrap

阅读更多关于前端之移动端库和框架bootstrap

学习移动端场景下的js事件；制作移动端特效常用的js库；介绍移动端常用开发框架Bootstrap；介绍动态样式语言less、sass、stylus的基本使用。移动端js事件移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件： 1、touchstart: //手指放到屏幕上时触发 2、touchmove: //手指在屏幕上滑动式触发 3、touchend: //手指离开屏幕时触发 4、touchcancel: //系统取消touch事件的时候触发，比较少用移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库。移动端js库 zeptojs Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。 zepto官网：http://zeptojs.com/ zepto中文api：http://www.css88.com/doc/zeptojs_api/ zepto包含很多模块

Web前端基础学习-3

阅读更多关于 Web前端基础学习-3

bfc（block formatting context）块级格式化上下文生成bfc的方式： 1、根元素； 2、float属性不为none（脱离文档流）； 3、position为absolute或者fixed的时候； 4、display为inline-block、table-cell、table-caption、flex、inline-flex； 5、overflow不为visible（默认）。渲染的流程：文档解析成对象模型（dom），通过选择器给对应的元素加上样式，根据渲染规则到显存区域，渲染过程中用到的数据通过上下文来获取。 bfc：渲染时用于保存临时数据和获取外部数据的容器。 HTML和body都是bfc。 bfc的应用：自适应两栏布局；清除内部浮动；防止垂直margin塌陷； ....... 响应式布局：三要素：弹性图片、媒体查询、弹性布局响应式布局开发概念：移动端优先和PC端优先根据当前项目的用户比例进行设计，项目的主要用户为移动端用户时采用移动端优先布局，否则采用PC端优先布局。视口：布局视口：网页在移动端中渲染出的区域，用来加载网页；可视视口：浏览器的窗口；理想视口：由乔布斯提出，当布局视口大小与可视视口大小相同的时候就是理想视口。 css伪元素伪元素根据字面理解就是伪装成元素，但是伪元素并不是元素，而是于生成的内容相关联

订阅移动互联网终端