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

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实际开发适

rem适配布局1rem基础rem单位;是一个相对单位，类似于em,em是父元素的字体大小（font-size）rem相对于html元素的字体大小rem优点就是通过修改html里面的为大小来改变页面中元素的大小进行整体控制html{font-size:12px;}P{height：10rem；width:10rem;}p盒子就变成了120*120px的盒子2媒体查询MediaQuery媒体查询是CS

rem基础rem单位rem(rootem)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。媒体查询什么是媒体查询媒体查询（MediaQuery）是CSS3新语法。使用@media查询，可以针对不同的媒体类型定义不同的样式@media可以针对不

什么是响应式布局一种网站兼容多种终端对不同屏幕尺寸（大小）做出响应，并进行相应布局的一种移动Web开发方式以下有两种响应式布局，仔细读懂其中的代码，你也就掌握了响应式布局的原理了。

我觉得呀，Android/iOS开发人才市场有点饱和了，而移动Web开发是新的热点。于是，我“转行“了。今天登陆CSDN网，注意到有网友给我发私信，

这篇介绍qq分享（定制微信，手机QQ，QQ空间APP内的分享内容）：腾讯移动web开发平台文档：http://open.mobile.qq.com/api/component/share1.在页面中直接引入

所谓的流式布局就是我们常说的百分比布局，页面中盒子的宽度常常是通过百分比值来设置的。流式布局的特征：a、宽度自适应，高度写死，并不是百分百还原设计图b、图标都是固定死大小的，包括字体等也是固定死的。并不是所有的东西都是自适应的。c、一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化经典的流式布局左侧固定，右侧自适应右侧固定，左侧自适应两侧固定，中间自适应（圣杯布局，双飞翼布局）等分布局

从这章开始,学习移动web移动web开发指的是需要适配移动设备的网页开发,和pc端没有本质的区别,还是使用html,css,js一.学习移动web的原因1.使用移动设备的用户越来越多2.一定设备屏幕大小不一

2019独角兽企业重金招聘Python工程师标准>>>移动应用开发工具和移动应用漏洞检测工具，另外，HTML5提供了很多易于移动web开发的特性。

http://www.chengxuyuans.com/web_technology/zeptojs-build.htmlzepto.js是个好东西，遵循jQueryAPI，但比jQuery小巧很多，很多移动

本文基于http://www.cnblogs.com/xiaohuochai/p/5496995.html，在该文的基础下，进行整理。在桌面上，视口的宽度和浏览器窗口的宽度一致。而在移动端，视口分为布局视口(layoutviewport)、视觉视口(visualviewport)和理想视口(idealviewport)。布局视口为了容纳为桌面浏览器设计的网站，移动设备默认的布局视口宽度远大于屏幕的

视口（viewport）是用来约束网站中最顶级块元素的，即它决定了的大小在PC设备上viewport的大小取决于浏览器窗口的大小，以CSS像素做为度量单位。viewport是由苹果公司为了解决移动设备浏览器渲染页面而提出的解决方案，后来被其它移动设备厂商采纳，其使用参数如下：通过设置属性content="“实现，中间以逗号分隔例如width设置layoutviewport宽度，其取值可为数值或者d

一、视口布局视口视觉视口理想视口1.1为什么要使用视口移动开发兴起后，出现的概念也就是说，如果我们开发的页面只需要适应PC端，则不用考虑视口的概念看下面的代码，并没有对视口进行配置Document.box{width:300px;}在PC端的表现和在手机端的表现分别如下原因在于，我们在手机端浏览中渲染此页面时，手机设置了视口为980，而我们手机屏幕的宽度为375，默认情况下PC上的内容是无法在手机

响应式布局学习目标一个页面兼容了pc端，pad端，和手机端响应式布局是不需要单独写移动端页面的响应不同的设备发生不同的变化时，包括三端之间的变换。响应式开发响应式开发原理就是使用媒体查询（mediaquery）针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。通过媒体查询实现档位的变化响应式布局容器响应式需要一个父级（.container）作为布局容器，来配合子级元素来实现变化效果。

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

最近学习了些移动web开发的基础知识，稍微做下记录总结：Hello,移动web：https://www.imooc.com/learn/494一、基础知识1.关于Pixelpx:CSSpx，逻辑像素，浏览器使用的抽象单位

1.Bootstrap中的js组件里的标签页使用的是锚点链接的方式切换选项卡及内容的◆导航区域：a标签的href='#home'◆内容区域：div标签的id='home'◆使用时注意：【◇导航区域与内容区域的位置可以互换◇两块儿区域是互相独立的，仅仅通过href属性跟id进行关联，所以才可以防止不同的位置◇如果想要增加导航和内容，需要在两个区域都添加代码，因为需要对应，新增加的导航对应新增加的内容

4、百度移动web框架百度移动web框架有三个了解了一下。4.1GMUGMU（GlobalMobileUI）是百度前端通用组开发的移动端组件库，具有代码体积小、简单、易用等特点，组件内部处理了很多移动端的bug，覆盖机型广，能大大减少开发交互型组件的工作量，非常适合移动端网站项目。该组件基于zepto的mobileUI组件库，提供webapp、pad端简单易用的UI组件!4.2Clouda+Clo

今天这篇文章向大家推荐10大优秀的移动Web开发框架，帮助开发者更加高效的开发移动Web应用。

在移动Web开发中就是指的CSS的逻辑像素。css像素：web编程用到的，在JS和CSS中使用就是CSS像素，是可变的。设备像素比（dpr）:用来描述单一方向上，设备物理像素的点数/逻

之前我们已经介绍过四大主流移动Web开发框架，今天我们再次深入，探讨Web移动应用框架需要具备的技术特性和理念。

简介现在，针对移动设备像智能手机和平板电脑的应用开发很流行。Apple公司的AppStore（针对iPhone、iPod和iPad）拥有超过350,000种应用，而Android的marketplace也快速追赶上来，现在已经拥有超过200,000种应用。然而，Android和iOS并非是仅有的两种移动平台。BlackBerry也是有力的竞争者，此外还有Nokia。最近Microsoft发布了Wi

如果你是一个开始接触移动Web开发的前端工程师，那么你或许也遇到了和我曾经遇到的过问题：有太多新的概念需要掌握，太多相似的概念需要区分。没关系，我将用两篇文章的篇幅来解决这些问题。

您可能感兴趣的相关文章移动Web开发的10个最佳JavaScript框架十个拥有丰富UI组件的JavaScript开发框架精心推荐几款极好的JavaScript文件上传插件精心挑选几款优秀JavaScript

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

适用设备：iOS、WindowsMobile在一些移动设备上，比方说iPhone,WindowsMobile，当用户把手机切换到横屏时，浏览器会自动地重置文本字体大小。这可能会对我们造成困扰，因为我们希望能够完全掌控用户界面的设计和浏览器对页面的渲染结果。新建ch02r02.htmlfigure,figcaption,header{display:block;margin:0auto;text-a

用户可以在浏览器中启动移动设备的原生应用程序，比如地图、电话、短信等，具体能够启动哪些应用程序，这取决于该移动设备上哪些原生应用是否允许从浏览器启动。新建ch02r05.htmlHTML5LogoLoremipsumDirections在PlamOS的浏览器中访问该页面，并点击"Directions"链接，该动作会启动你手机上原生的GoogleMap应用。不像有些URLScheme(统一资源定位符

移动端WEB开发之响应式布局1.0响应式开发原理1.1响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的宽屏设备（大桌面显示器）1.2响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是

移动web开发之rem布局rem基础媒体查询Less基础rem适配方案一、rem基础1、rem单位rem(rootem)是一个相对单位，类似于em，em是父元素字体大小。

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

移动web开发流式布局1移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端WEB开发之响应式布局1.0响应式开发原理1.1响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）992~1200的中等屏幕（桌面显示器）大于1200的宽屏设备（大桌面显示器）1.2响应式布局容器响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。原理就是

移动web开发之rem布局rem基础媒体查询Less基础rem适配方案一、rem基础1、rem单位rem(rootem)是一个相对单位，类似于em，em是父元素字体大小。

移动web开发流式布局1移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

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

在css2中就有mediatype属性，用于判断媒体类型。而在css3中新增了mediaquery属性用于增强mediatype属性。mediaquery属性可以看做是是mediatype属性的增强版，使mediatype可以进行条件判断输出对应的css。screen仅是media中的一种常用设备的尺寸：显示器1280x800ipad1024x768Android800x480iPhone640x

一基础知识1.1屏幕屏幕尺寸——对角线的长度分辨率——像素度量（水平和垂直）1.2长度度单位（相对和绝对长度）像素是一个相对的长度单位（像素没有固定的长度）1.3像素密度（DPI.PPI）--DotsPerInchPixelsPerInch单位面积像素里面能放多少的点数屏幕尺寸固定时，当PPI越大，像素的实际大小就会越小越高，，清晰度yu当PPI越小，像素实际大小就越大补充：Retina-视网膜屏

我们经常使用tabs栏切换在这里我总结了一下tabs栏的切换方式。1.使用伪类：target切换.test.hd{padding:10px0;}.test.nav{position:fixed;right:10px;left:540px;}.test.nava{display:block;margin:10px0;}/*重点*/.test.bd.panel{width:500px;margin-t

在移动WEB开发中，有些场景需要判断设备的横竖屏状态，在发现orientation方法之前我用的是获取设备的宽高来判断：//判断横竖屏$(window).resize(()=>{letw=$("body

在响应式设计或移动Web开发当中经常见到的一句代码：content属性还包括initial-scale，user-scalable等，不过这里不谈，它们的意思都很容易理解。

进行移动web开发已经有一年多的时间了，期间遇到了一些令人很困惑的东西。

高级程序设计》完整版电子书http://down.51cto.com/data/259638《HTML5从入门到精通》电子书下载http://down.51cto.com/data/309111《HTML5移动

流式布局方式是移动web开发使用的比较常见的布局方式max-width最大宽度（max-height最大高度）min-width最小宽度（min-hight最小高度）2flex布局2.1传统布局与flex

一.移动web开发与适配跑在手机端的web页面(h5页面)跨平台基于webview告别IE，拥抱webkit1.常见的移动web适配方法：(1).PC:960px/1000px居中盒子模型，定高，定宽display

引言在移动web开发中，首先必须要弄清楚的就是viewport的概念。不管对于web开发新手还是从事pc端web开发已久的开发者，viewport的概念和使用至关重要。

实际开发中的像素：css像素设备像素比dpr=设备像素/css像素标清屏dpr=1高清屏dpr=2缩放改变的是css像素大小PPI（每英寸的物理像素点）=根号（屏幕横向分辨率²+屏幕纵向分辨率²）/屏幕对角线长度（单位英寸）视口viewportconsole.log(window.innerWidth);//窗口文档显示区宽度console.log(document.documentElement

文章目录1.移动端基础1.1浏览器现状1.2移动端调试方法2.视口2.1布局视口layoutviewport2.2视觉视口visualviewport2.3理想视口idealviewport2.4meta标签3.二倍图3.1物理像素&物理像素比3.2视网膜屏幕3.2多倍图3.3背景缩放background-size3.4二倍精灵图做法3.5多倍图切图cutterman4.移动开发解决方案与开发选择