响应式页面兼容移动端（其次）一、单独制作页面（主流）1.流式布局（百分比布局）流式布局（百分比布局），也称非固定像素布局；通过将盒子的宽度设置成百分比，从而根据屏幕宽度来进行伸缩，不受固定像素的限制，内容向两侧填充；是移动

★文章内容学习来源：拉勾教育大前端就业集训营本篇学习目标：掌握移动端常见问题解决方案目录：一、浏览器二、CSS初始化文件normalize.css三、CSS盒模型box-sizing四、CSS特殊样式设置一、浏览器移动端常用浏览器基本是webkit内核，因此只用考虑webkit兼容问题；我们可以放心使用HTML5标签和CSS3样式;可以查看这篇文章回顾HTML5标签和CSS3样式：★【汇总】零基础

★文章内容学习来源：拉勾教育大前端就业集训营本篇学习目标：了解移动端开发常见选择现在市场常见的移动端开发方案有2种：单独制作移动端页面；响应式页面。市场主流选择：单独制作移动端页面。一、主流：单独制作移动端页面单独制作移动端页面，其代码与PC端代码不同；案例：京东商城手机版(m.jd.com)淘宝触屏版(m.taobao.com)苏宁易购手机版(m.suning.com)携程网手机版(m.ctri

★文章内容学习来源：拉勾教育大前端就业集训营★本篇学习目标：掌握二倍图的用法目录：一、物理像素点二、物理像素比/屏幕像素比三、Retina(视网膜屏幕)四、多倍图五、常见多倍图切图格式一、物理像素点物理像素点：屏幕显示的最小颗粒，是物理真实存在的；厂商出厂时候就设计好的，比如iPhone6/7/8是750*1334;二、物理像素比/屏幕像素比我们开发的时候，不一定是1px=1个物理像素点；早期的手

★文章内容学习来源：拉勾教育大前端就业集训营本篇学习目标：了解视口相关因为涉及到移动端页面开发，而移动端的内容显示区域都是不同的，这就涉及到视口（viewport）的概念。本篇目录：一、视口二、布局视口三、视觉视口四、理想视口五、视口标签六、总结一、视口就是浏览器显示内容的区域；可以分为：布局视口、视觉视口、理想视口。二、布局视口Layoutviewport；早期PC端浏览器为了能够在移动端实现，

---------------------flex布局------------------1.1传统布局与flex布局1.传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局2.flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：如果是PC端页面布局，我们还是传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还

当微信中的WebView逐渐成为移动Web的一个重要入口时，微信就有相关的JSAPI了。

当微信中的WebView逐渐成为移动Web的一个重要入口时，微信就有相关的JSAPI了。

京东零售开源项目NutUI是一套京东风格的轻量级移动端Vue组件库，是开发和服务于移动Web界面的企业级产品。经过长时间的开发与打磨，NutUI3.0终于要和大家见面了！

文章目录1.电商业务概述2.项目初始化3.码云相关操作4.配置后台项目5.实现登录功能1.电商业务概述客户使用的业务服务：PC端，小程序，移动web，移动app管理员使用的业务服务：PC后台管理端。

移动端适配方案引入flexible.js在*.html的标签中引入flexible.js会做以下几件事：给*.html添加内联样式表只是reset一些样式给设置[data-dpr=""]属性、font-size样式[data-dpr=""]属性的作用：通过属性选择器，设置不同分辨率下的样式font-size:的作用：rem单位的基准尺寸监听resize、pageshow事件来重新设置html.st

移动端适配方案引入flexible.js在*.html的标签中引入flexible.js会做以下几件事：给*.html添加内联样式表只是reset一些样式给设置[data-dpr=""]属性、font-size样式[data-dpr=""]属性的作用：通过属性选择器，设置不同分辨率下的样式font-size:的作用：rem单位的基准尺寸监听resize、pageshow事件来重新设置html.st

flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，也是现在使用最多的布局方式。

flex布局：主流的布局方式，不仅适用于移动Web，网页上也表现良好，也是现在使用最多的布局方式。

除此之外，最近，Google宣布将有一个单独的移动web搜索索引。这革命性一步完全改变了移动app开发趋势，特别是从SEO和webapp的角度。加速移动页面AMP改变webapp

移动端web开发一、移动web开发基础移动端调试方法ChromeDevTools(谷歌浏览器)的模拟手机调试搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器使用外网服务器，直接IP或域名访问视口视口

.安装jdk(1)配置环境变量3.安装AndroidSDK4.安装python5.安装AppiumAppium简介Appium是一个自动化测试开源工具，支持IOS和Android平台上的移动原生应用、移动

移动原生应用：单纯用ios或者android开发语言编写的、针对具体某类移动设备、可直接被安装到设备里的应用，一般可通过应用商店获取，比如某个游戏app；移动web应用：使用移动浏览器访问的应用（appium

用户管理权限管理商品管理商品列表分类参数商品分类订单管理数据统计1.电商业务概述客户使用的业务服务：PC端，小程序，移动web，移动app管理员使用的业务服务：PC后台管理端。

文章目录1.重点提炼2.传统布局和flex布局对比2.1传统布局2.2flex布局（弹性布局）2.3建议3.flex布局初体验3.1搭建HTML结构3.2example014.flex布局原理4.1demo4.2flex布局原理总结5.父项常见属性5.1flex-direction设置主轴的方向:star:5.2主轴与侧轴5.3属性值5.3.1example025.3.1.1example02-1

学习目标：能够说出flex盒子的布局原理能够使用flex布局的常用属性能够独立完成携程移动端首页案例知识点：flex布局体验flex布局原理flex布局父项常见属性flex布局子项常见属性携程网首页案例制作传统布局兼容性好布局繁琐局限性，不能在移动端很好的布局flex弹性布局操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持建议：如果是PC端页面

完成的事实验了内联元素在排版上的情况，学习了flex布局，并应用开发简单页面。媒体查询@media相关的知识，了解了其关于自适应的关系。了解了rem对自适应的影响。解决的问题rem是怎么自适应屏幕宽度的变化的，其实是通过js动态获取屏幕宽度的变化的程度，让html字体大小也同样程度变化，即实现rem等比扩大和缩小inline元素设置宽高不起作用，但设置padding,margin,border是起

本文首发于：行者AIAppium是一个自动化开源工具，支持iOS、Android和Windows桌面平台上的原生、移动Web和混合应用的自动化。

本文首发于：行者AIAppium是一个自动化开源工具，支持iOS、Android和Windows桌面平台上的原生、移动Web和混合应用的自动化。

移动WEB开发目前国内的移动端浏览器基本是根据webkit修改来的内核，所以兼容移动端的主流浏览器，处理webkit内核即可。

1.检查是否触屏设备//此方法在chrome模拟手机的模式中似乎无效，但是在iphone中是有效的，在安卓中待测试functionisTouchDevice(){return('ontouchstart'indocument.documentElement);}2.检测更多的设备和浏览器信息，靠的是ua信息varbrowser={versions:function(){varu=navigator

1.0.HTML5学习目标：了解H5新变化掌握H5新增语义化标签掌握H5新增多媒体标签掌握H5新增input表单、表单属性HTML5介绍：HTML5就是HTML版本的第五次重大修改，目的为了适用移动端的发展版本：HTML4–XHTML–HTML5HTML5前景移动端优先广义的HTML5是HTML5本身+CSS3+JavaScript1.1.语义化标签了解使用语义化标签的好处是增强了代码的可阅读性，

NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web界面的企

NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web界面的企

vue中高德地图如何结合websocket实现多辆车辆的实时移动websocket作用和准备阶段地图组件部分处理数据展示车辆轨迹大体思路：其实这一部分大家不用看，没什么卵用，不过我还是要解释一下：接下来就很重要了

移动web滚动问题在移动端如果使用局部滚动，意思就是我们的滚动在一个固定宽高的div内触发，将该div设置成overflow:scroll/auto;来形成div内部的滚动，这时我们监听div的onscroll

1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0flex布局原理flex是flexibleBox的缩写，意为"弹性布局"，用

小程序移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差

1.0移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统

1.传统布局和flex布局对比1.1传统布局兼容性好。布局繁琐。局限性，不能再移动端很好的布局。1.2flex布局操作方便，布局极其简单，移动端使用比较广泛。pc端浏览器支持情况比较差。IE11或更低版本不支持flex或仅支持部分。1.3建议如果是pc端页面布局，还是采用传统方式。如果是移动端或者是不考虑兼容的pc则采用flex。2.flex布局原理flex是flexibleBox的缩写，意为"弹

移动浏览器或移动Web框架不支持Monaco编辑器（但移动的有的浏览器是支持的，起码我用的几个都支持）。2.开始2.1安装环境npmin

在移动web兴起初期，用户对300ms的延迟没有太大的感觉，但随着用户对交互体验的要求的提高，如今，移动端的300ms延迟严重影响了用户体验。300ms延迟由来07年，苹果公司发

随移动端设备的普及，移动web网站成为了前端工程师工作主攻点诸多的手机厂商，导致每种手机机型、分辨率等手机参数相差很多，同时给前端开发人员增加了工作难度此时手机端的适配是个不得不解决的问题下面介绍一下网站适配的实现及原理是如何操作的首先要在

随移动端设备的普及，移动web网站成为了前端工程师工作主攻点诸多的手机厂商，导致每种手机机型、分辨率等手机参数相差很多，同时给前端开发人员增加了工作难度此时手机端的适配是个不得不解决的问题image.png

WebAppWebApp是指使用HTML5编写的移动Web应用，webapp可以运行在PC、Android、iOS端等，不受限于系统，依赖于浏览器。

开发工具HTML+CSSJavascriptJQueryHTML5+CSS3UI组件AJAX&JSON&XMLReactVueNodeJSTypescript浏览器原理浏览器兼容移动web端开发面向对象在

移动WEB开发_rem布局01-rem单位rem(rootem)是一个相对单位em：相对于父元素的字体大小rem：相对于html元素的字体大小优势：父元素文字大小可能不一致，但是整个页面只有一个html

移动web开发之rem布局rem基础rem单位是一个相对单位，类似于em，em是相对于父元素的字体大小来说的；而rem的基准是相对于html元素的字体大小。

1.概述rem布局主要的作用就是：根据屏幕的大小的不同，改变盒子的高度和文字的大小2rem单位rem和em类似，都是相对单位em相对的是父元素的字体大小rem相对的是html根元素的字体大小3.媒体查询3.1什么是媒体查询：媒体查询（MediaQuery）是CSS3的新语法使用@media查询，可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的

前言在了解了基本的布局方案移动Web开发基础-百分比+flex布局方案之后，我们来了解下利用rem这个css单位来布局的方案。其实不管哪种方案，最终的目的都是为了适配不同设备尺寸的屏幕显示。

Java(Android),Objective-C(iOS)以及VisualC++(WindowsMobile)等等⊙需要使用各自的软件开发包，开发工具以及各自的控件移动WebApp⊙因为运行在移动设备的浏览器上

rem1.页面布局文字会随着页面大小的变化而变化2.流式布局和flex布局主要是针对于宽度，而rem布局可以对宽度和高度都进行布局3.屏幕发生变化时，元素的宽度和高度都进行等比例缩放rem（fontsizeoftherootelement）是指相对于根元素（html）的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（fontsizeoftheelement）是指

1.rem基础流式布局和flex布局主要针对宽度布局，rem适配布局主要针对高度。1.1rem单位rem是一个相对单位，类似于em是相对与父元素字体大小来说的。rem和em的差别：rem的基准是相对于html元素的字体大小；em是相对于最近父元素字体大小。rem优点：可以通过修改html里面的字体大小来改变页面中的元素的大小，从而实现整体控制。div{width:12px;}p{width:10e

01.rem基础02.媒体查询2.1什么是媒体查询2.2语法规范案例:根据页面宽度改变背景颜色2.3媒体查询+rem实现元素动态大小变化案例:媒体查询+rem实现元素变化2.4引入资源(了解)03.Less基础3.1维护css的弊端3.2Less介绍3.3Less安装3.4Less使用3.5Less变量3.6Less编译3.7Less嵌套3.8Less运算04.rem适配方案4.1rem实际开发适

这对于大部分应用程序逻辑都位于客户端的移动Web应用程序来说尤其有用。在本文中，您将了解如何使用WebWorkers并发现哪些任务最适合它们。您还将看到如何使用其他HTML5技术才能提高