在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。
[TOC] 什么是HTML HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 （<html>） HTML 标签通常是成对出现的
转换（transform），也称变形。就是改变元素在页面中的位置，大小，角度以及形状。
那么在移动端为什么是 980 而不是其他的值呢，因为过去网页的版心都是 980，乔老爷子为了能够让网页在移动端完美的展示, 所以将 iOS 手机视口的大小定义为了 980，后来谷歌也觉得这是一个非常牛 X 的方案, 所以 Android 手机的视口也定义为了 980。
前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前，需要先对几个概念进行普及介绍
通过修改坐标，CSS transform属性可以在不影响正常文档流的情况下改变作用内容的位置。CSStransform包括一系列 CSS属性，通过这些属性可以对HTML元素进行变形。可以进行的变形包括旋转，倾斜，缩放以及位移，同时适用于平面以及三维空间。 在空间中实现CSS变形会稍微复杂一点。首先必须设置一个透视点(perspective) 来配置3D空间然后定义2D元素在空间中的变形。
vw是相对单位，1vw表示屏幕宽度的1%。基于此，我们可以把所有需要适配屏幕大小等比缩放的元素都使用vw做为单位。不需要缩放的元素使用px做单位。
用截图工具（截图工具测得的像素等于物理像素）测得CSS中的1px 的等于物理像素1px的 那么他们的比值就是1：1
在写HTML、CSS对设计稿进行还原时不关注屏幕尺寸的差异，而是直接按设计稿的标注来开发。比如设计稿里标注的文字字号是30px，CSS里就设置文字字号30px。
HTML5学堂：作为前端开发者，总会在设计图上看到各种各样奇怪的图形，想用图片解决又怕觉得很low，想用其它方法又一下子反应不过来。不管现在的你有没有面对过这样的状态，多做准备总是好的。 本文主要内容 一、CSS3的变形引入 二、二维变形的语法 三、二维变形的常用属性分析 四、二维变形的操作实例 五、总结 一、CSS3的变形引入 在网页设计中，CSS被习惯性的理解为擅长表现静态样式，动态的元素必须借助于javascript才可以实现，而CSS3的出现改变了这一思维方式。CSS3除了增加革命性的创新功能外，还
HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport（视口） 参考答案 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> width=device-width 是设置视口宽度为设备的宽度，还可以固定视口的宽度，例如： width
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。当然maximum-scale=1.0, user-scalable=0不是必需的，是否允许用户手动播放根据网站的需求来定，但把width设为width-device基本是必须的，这样能保证不会出现横向滚动条。
``` ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ······················· 我们自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的图片文件 ├─ /js/ ························ 自己写的JS脚步 ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】 ├─ /favicon.ico ················ 站点图标 └─ /index.html ················· 入口文件
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。
当网页打开后，用户还可以缩放网页，CSS 还需要适应新的限制。即不能在刚创建网页时就应用样式，而是等到要将网页渲染到屏幕上时，才能去计算样式。这给 CSS 增加了一个抽象层。我们无法根据理想的条件给元素添加样式，而是要设置无论元素处于任意条件，都能够生效的规则。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
本文介绍了移动端网页开发的一些基础概念，包括HTML、CSS、JavaScript，以及用于移动开发的响应式布局和自适应图片等。同时，文章还探讨了如何通过meta标签和viewport来优化移动端网页的展示效果。最后，还介绍了一些移动端网页开发中常见的问题和解决方法。
简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。
jQuery Gallery Plugin在Asp.Net中使用 推荐一个简单易用的Gallery插件：jQuery Gallery Plugin 下面是在Asp.Net开发中应用 示例截图： image.png -------------------------------------------------------------------------------风骚分隔线----------------------------------------------------------------
width=device-width //设置页面宽度等于设备物理宽度
移动端适配最简单的是通过js动态计算 viewport 的缩放值，但过于粗暴，会导致页面图片文字失真模糊。目前，移动端页面一般使用 rem 或 vw / vh 开发会较为方便，下面以 rem 为例：
在 ArcGIS Maps SDK for JavaScript 中，Map 和 MapView 是两个重要的概念，用于创建和展示地图应用程序。
HTML5学堂：移动端布局一直都是一个问题，各种各样的分辨率使得移动端的布局需要耗费大量的时间。今天介绍一个框架pageResponse.js可以让页面在各种分辨率手机下都能完全不走样。 通常移动端的布局方式 1、rem布局，通过动态设置根目录下的font-size达到元素大小“自适应”，通常和百分比布局一起使用 2、固定像素设固定视口宽度。 3、最费事的media query，根据设备视口宽度不同设置不同的样式，换句话说一个页面有多套样式。可以说是正宗的响应式布局。 常规的做法带来的苦恼 常规的这些做法总
使用skew方法来实现文字或图像的倾斜处理，在参数中分布指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。
这个就比较简单了，直接拖一个控件，再加载一下url，记得在AndroidManifest.xml中加一下权限
在之前写的如何打印用六边形组合的蜂窝状图形的博客中，有简单的提到transform标签。但是对于这个属性的值，并没有怎么简介。今天就来学习了解一下transform标签吧！
参考 【移动端网页布局】移动端网页布局基础概念 ③ ( meta 视口标签简介 | 利用 meta 视口标签 设置 网页宽度 / 是否允许用户缩放 / 初始缩放比例 / 最小缩放比例 / 最大缩放比例 ) 博客 , 编写 meta 视口标签 , 视口标签内容如下 :
1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥，需要注重一下两点：
移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
transform 字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：移动 translate，缩放scale，旋转rotate，翻转skew，改变旋转轴心等。
步骤4中的 transform: scale(0.5) translate( -96px, -96px);为什么实际只移动了48px？
工作以后，大部分的业务工作都是基于移动端H5的，开发过程中学习了很多东西，遇到过许多问题，诸如rem\em\css px\device px等，本文纯属个人的归纳总结，如有问题，请指出亲喷~
在当今这个移动设备发展越来越快，并且技术越来越成熟的时代，移动设备成了企业扩展业务不可或缺的重要领域之一，随之而来的是适应手机的网站层出不穷，在开发过程中，我们往往会遇到一个很尴尬的问题：移动端网页在用户双击屏幕时会变大，导致整个页面的布局错误，非常 影响最终效果，下面介绍一种通过html的meta标签来阻止该现象发生的办法。
而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。
Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词）
假设 html 的 font size = 1px 的话，就可以写 28 rem 了，更方便了，但是浏览器对字体大小有限制，设为 1px 的话，在浏览器中是失效的，会以 12px（或者其他值） 做一个计算 , 就会得到一个很夸张的结果，所以可以把 html 写的大一些。
这两天，了不起项目中需要实现放大镜功能。就此正好可以给大家分享一个在网站上有演示放大图片，文本和日历等功能的插件：AnythinZoomer。
例：html中字体尺寸为 20px，盒子宽度为 5rem，则最后显示的盒子宽度为 100px。
[总结]我对移动端适配的了解 不知不觉做前端已经两年了，从PC端，移动端，微信小程序一路走来到今天刚刚开放注册的快应用(手机厂商对抗小程序的新技能,所以在注册时用的是qq邮箱的话要去垃圾箱里才能找到注册邮件)，对于前端圈日新月异的磅礴发展对于大前端发展是喜闻乐见的，这次的快应用的手机厂商们为其开放了应用入口和系统推广引流入口。这些新能力为前端开发者们带来更强的作战能力。 我们在开发PC站时经常在浏览器兼容问题上耗费巨大的时间，到了移动端，面对webkit内核的Safari与Chrome会舒心很多。b
很多人都有这样的疑问，基于HTML5 Canvas实现的元素怎么和用户进行交互？在这里我们用到HT for Web（http://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html）写了个Demo进行示例。 场景如下所示，在该场景中双击温度和湿度下的Node，会生成输入框供用户填写内容，这之后，用户按下“Enter”键可以将输入内容传到Node中，同时删除输入框，地址：：http://www.hightopo.com/dem
很多人都有这样的疑问，基于HTML5 Canvas实现的元素怎么和用户进行交互？在这里我们用到HT for Web（http://www.hightopo.com/guide/guide/core
举例如 iphone6 手机，屏幕分辨率为 1334×750，浏览器分辨率为 667×375，它们的单位都是像素，但是很明显在 mobile-web 开发中，我们只考虑浏览器分辨率，而不考虑屏幕分辨率。我们把浏览器的可视区域称为 visual-viewport，但是某些网站会因为可视区域过窄而产生各种各样的显示错乱，所以浏览器会在默认情况下把 viewport 设为一个较大的值，这样的话那些没有考虑响应式设计的网页也可以在手机端正常显示了（像在 PC 端显示得一样），我们把这个虚拟的窗口称为 layout-viewport，下文中省略为 viewport。
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
说到前端页面的布局方案，可以从远古时代的Table布局说起，然后来到 DIV+CSS布局，之后有了Float布局，Flex布局，Column布局，Grid布局等等。
WebView在现在的项目中使用的频率应该还是非常高的。 我个人总觉得HTML5是一种趋势。找了一些东西，在此总结。 本篇最后有一个非常不错 的 Html5Activity 加载类，不想看的可以直接跳下载。 WebSettings WebSettings webSettings = mWebView .getSettings(); //支持获取手势焦点，输入用户名、密码或其他 webview.requestFocusFromTouch(); setJavaScriptEnabled(true);
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
