webapp中字体怎么实现自适应布局？
webapp字体怎么实现自适应布局？
浏览 597回答 1
用占百分比而不是固定像素定义表格等控件元素吧
随时随地看视频关于rem，主要参考文档
1。腾讯ISUX ()
现在移动端 web app 的自适应布局的方案有 5种。
零. Flexbox
& & & &使用css3 flexbox 进行布局，对于富媒体和复杂排版的支持非常强大，未普及兼容性非常差，几乎没有在任何项目中得到应用。
一. 弹性布局
& & & & 使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。 因为em是相对父级元素的原因 没有得到推广。
二. 流式布局（Fluid）
& & & & &使用 % 百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。代表作栅栏系统（网格系统）
三. 响应式布局（Responsive）
& & & & 使用&&给不同尺寸和介质的设备切换不同的样。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
四. 自适应布局（&Adaptive）
& & & & &通常使用&&和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。自适应几乎已经成为优秀页面布局的标准。
这篇文章主要讲的是rem的使用。
css3 中引入了新的长度单位，rem。 &官方定义&font size of the root element
rem:rem和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。
兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持。（IE6-8不支持 &不过考虑是移动端web app &）
1.针对设计稿 计算rem
所有浏览器都一致默认保持着 16px 的默认字号&1em:16px&，但是 1:16 的比例不方便计算。在这里文档元素设置 font-size: 62.5%，可以很方便的利用十进制进行计算了，（CSS 预处理工具可以使用默认值）
html {font-size: 62.5%;/*10 & 16 & 100% = 62.5%*/}
body {font-size: 1.4/*1.4 & 10px = 14px */}
h1 { font-size: 2.4/*2.4 & 10px = 24px*/}
所以如果我有一个宽度为640的设计稿，通过上面的方法算出对应元素rem的大小　。（附注：实际项目不可以设置成&font-size: 62.5%,因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的rem计算不准确）
2。针对不同分辨率计算font-size
监听浏览器更改 html的font-size
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientW
if (!clientWidth)
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
if (!doc.addEventListener)
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
配合css预处理工具计算 rem 值。&Sass、LESS 、Stylus
Views(...) Comments()为了账号安全，请及时绑定邮箱和手机
点击这里，将文章分享到自己的动态
移动端webapp自适应实践
为什么要写这个
以前写过关于webapp自适应屏幕的，不过写的大多数群众看不懂，所以来个图文并茂的版本。虽然只是一个简单的页面，不过在做的过程中也遇到了一些问题，也算是好事吧！
该示例github地址：
访问地址：
psd：这个是最重要的东西，用于测量尺寸，以及切图，我是不太同意切图的工作交给ui，自己切比较好，psd的分辨率我做的是640px的宽度，当然这个psd是网上下的
css雪碧图制作工具：最新版（v4.3）能够将多张图片拼接成一张图片并且生成代码的小程序（本人自主研发）
webstorm：前端开发利器
马克曼：前端尺寸颜色测量工具
photoshop：切图利器
sass： css预编译工具
第一步、切图
我用的是photoshop切的图，切图如下：
当然可能看不太清楚，毕竟是白色的图
第二步、搭建框架
大体结构就是这个，地址：
第一步、CSS结构
CSS主要采用Sass作于预编译的工具，结构如下：
reset.scss文件主要是对于元素样式的重置
app.scss文件是对单个页面样式
size.scss文件里面包含了手机端自适应1-400尺寸的变量
第二步、js结构
js中最重要的是自适应的的代码，地址：移动端自适应，zepto这些都没有引入，因为只是个简单的示例
第三步、html页面机构
页面结构如下图：
header：头部标题
nav：头部的导航
controller：中间列表
footer：底部导航
第四步、生成雪碧图
利用雪碧图生成工具：生成雪碧图，并且生成代码：
将代码copy到css目录中的app.scss目录下
当然前提是要引入size这个里面方面变量的文件，要不然$_*就没法识别而报错了
第五步、页面以及css编码
@import "size";
//所有图片变量
@mixin sprite{background:url(../images/sprite.png) no-background-size:$_138 $_163;}
@mixin icon_right{height:$_59;width:$_59;background-position:0 -$_75 0 -$_5;}
@mixin icon_left{height:$_59;width:$_59;background-position:0 0;}
@mixin icon_tag{height:$_44;width:$_65;background-position:0 -$_1 0 -$_119;}
@mixin icon_person{height:$_44;width:$_65;background-position:0 0 -$_66;}
@mixin icon_book{height:$_44;width:$_65;background-position:0 -$_73 0 -$_71;}
@mixin icon_more{height:$_44;width:$_65;background-position:0 -$_73 0 -$_119;}
body{background: #fbfbfb}
.sprite{@}
.header{position:background: #dd3131;height: $_90;line-height: $_90;;width: 100%;left: 0;top: 0;font-size: $_40;color: #text-align:
button{position:top: $_16;border: $_2 solid #border-radius: 50%;box-sizing: content-box}
.btn-left{@include icon_left: $_16;}
.btn-right{@include icon_right: $_16;}
.nav{display: -webkit-position:left: 0;top: $_90;color: #3d3d3d;font-size: $_30;width: 100%;border-bottom: $_1 solid #e7e5e6;
a{display:height: $_60;line-height: $_60;text-align:background: #-webkit-box-flex: 1;border-right: $_1 solid #e7e5e6;box-sizing: border-}
.controller{padding: $_151 0 $_100 0;}
li{border-bottom:$_1 solid #cfcfcf }
a{display: -webkit-padding: $_16;}
img{height: $_122;width: $_122;display: block}
.list-right{-webkit-box-flex: 1;padding-left: $_15;
h1{color: #555;font-size: $_24;}
p{color: #878787;font-size: $_18;margin-top: $_15;line-height: 1.5}
.footer{height: $_100;position:left: 0;bottom: 0;width: 100%;display: -webkit-background: #4a4a4a;text-align:
a{display:-webkit-box-flex: 1;box-sizing: border-padding-top: $_10;border-right: $_1 solid #
&:last-child{border-right: none}
i{display:margin: 0 auto}
span{color: #font-size: $_24;display:margin-top: $_5;}
.icon_book{@include icon_book}
.icon_tag{@include icon_tag}
.icon_person{@include icon_person}
.icon_more{@include icon_more}
html代码：
&!DOCTYPE html&
&meta charset="UTF-8"&
&meta name="viewport" content="initial-scale=0.5,minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"&
&meta name="author" content="wangxing"&
&meta name="screen-orientation" content="portrait"&
&meta name="x5-orientation" content="portrait"&
&meta name="format-detection" content="telephone=no"&
&title&app自适应&/title&
&link rel="stylesheet" href="/css/reset.css"&
&link rel="stylesheet" href="/css/app.css"&
&script src="/js/lib/resize.js"&&/script&
&header class="header"&
&button class="sprite btn-left"&&/button&
&span&远程酒业&/span&
&button class="sprite btn-right"&&/button&
&nav class="nav"&
&a href="javascript:;"&资讯&/a&
&a href="javascript:;"&产品&/a&
&a href="javascript:;"&实战&/a&
&a href="javascript:;"&讨论&/a&
&section class="controller"&
&ul class="list"&
&a href="#"&
&img src="src" alt="图片"&
&div class="list-right"&
&h1&酒名字&/h1&
&p&提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……&/p&
&a href="#"&
&img src="src" alt="图片"&
&div class="list-right"&
&h1&酒名字&/h1&
&p&提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……&/p&
&a href="#"&
&img src="src" alt="图片"&
&div class="list-right"&
&h1&酒名字&/h1&
&p&提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……&/p&
&a href="#"&
&img src="src" alt="图片"&
&div class="list-right"&
&h1&酒名字&/h1&
&p&提升白酒等传统酒类生产机械化水平成为行业未来研究工作的重点，从而促进酿酒装备与技术的快速发展……&/p&
&/section&
&footer class="footer"&
&a href="#"&
&i class="sprite icon_book"&&/i&
&span&资讯&/span&
&a href="#"&
&i class="sprite icon_tag"&&/i&
&span&产品&/span&
&a href="#"&
&i class="sprite icon_person"&&/i&
&span&实战&/span&
&a href="#"&
&i class="sprite icon_more"&&/i&
&span&讨论&/span&
用到图片的地方，主要有两个class，一个是雪碧图的class，一个就是他本事引用的class，二者结合
大家可以看到css代码中的大小全都是$_*，也就是测量出来的大小，包括字号也是。
这样就构成了我们的webapp
iphone5上是这样
iphone6上是这样
平板上是这样
希望这个博客对大家有帮助，尤其是新手，也希望大家多提意见。
作者：你猜不猜
文章源自：
若觉得本文不错，就分享一下吧！
评论加载中...
相关文章推荐
正在加载中
Web前端工程师
作者相关文章web app 自适应方案总结 关键字 弹性布局之rem
现在移动端 web app 的自适应布局的方案有 5种。
零. Flexbox
使用3 flexbox 进行布局，对于富媒体和复杂排版的支持非常强大，未普及兼容性非常差，几乎没有在任何项目中得到应用。
一. 弹性布局
使用 em 或 rem 单位进行相对布局，相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。 因为em是相对父级元素的原因 没有得到推广。
二. 流式布局（Fluid）
使用 % 百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。代表作栅栏系统（网格系统）
三. 响应式布局（Responsive）
使用 @media 媒体查询 给不同尺寸和介质的设备切换不同的样。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
四. 自适应布局（ Adaptive）
通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。自适应几乎已经成为优秀页面布局的标准。
这篇主要讲的是rem的使用。
css3 中引入了新的长度单位，rem。
官方定义 font size of the root element
rem:rem和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行；rem是相对于根元素的font-size进行计算。这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。
兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持。（IE6-8不支持
不过考虑是移动端web app
1.针对设计稿 计算rem
所有浏览器都一致默认保持着 16px 的默认字号 1em:16px ，但是 1:16 的比例不方便计算。在这里元素设置 font-size: 62.5%，可以很方便的利用十进制进行计算了，（CSS 预处理工具可以使用默认值）
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4/*1.4 × 10px = 14px */}
h1 { font-size: 2.4/*2.4 × 10px = 24px*/}
所以如果我有一个宽度为640的设计稿，通过上面的方法算出对应元素rem的大小　。（附注：实际项目不可以设置成 font-size: 62.5%,因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的rem计算不准确）
2。针对不同分辨率计算font-size
监听浏览器更改 html的font-size
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
recalc = function () {
var clientWidth = docEl.clientW
if (!clientWidth)
docEl.style.fontSize = 20 * (clientWidth / 320) + "px";
if (!doc.addEventListener)
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);
配合css预处理工具计算 rem 值。 Sass、LESS 、Stylusweb页面的自适应开发，要求就是跨平台，跨浏览器，一般mobile+pc，前几天写了几个pc端全屏页面，用的是百分比，在手机上看了下效果 相去甚远。这么看来mobile+pc 的自适应 有些时候就是个伪命题。
那对于移动端的自适应就 一般的宣传页面全屏滑动那种，用百分比，若复杂了就肯定不行，仔细看了下某淘的处理用的rem为单位，就学习在这个方法吧首先对于设计图，width 一般是640的。
rem：CSS3新增了一个相对单位rem（root em，根em），这样rem 就应该设定在html{font-size:1}，
某淘对此的设定是根据手机宽度设定的,
必不可少的这句：&meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"&由js 控制的 ，
首先是在苹果上不一样，苹果6就是&meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"
这样设置可以用 window.devicePixelRatio 设备像素比
window.clientWitdh*window.devicePixelRatio/10
，这样就得出了font-size大小，
而andorid上有大部分就是、
&meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"&
font-size就是 window.clientWitdh/10；
淘*里使用的代码：
!function(J, I) {
function H() {
var d = E.getBoundingClientRect().
d / B & 540 && (d = 540 * B);
var e = d / 10;
E.style.fontSize = e + "px",
z.rem = J.rem =
var G, F = J.document,
E = F.documentElement,
D = F.querySelector('meta[name="viewport"]'),
C = F.querySelector('meta[name="flexible"]'),
z = I.flexible || (I.flexible = {});
console.warn("将根据已有的meta标签来设置缩放比例");
var y = D.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
y && (A = parseFloat(y[1]), B = parseInt(1 / A))
var x = C.getAttribute("content");
var w = x.match(/initial\-dpr=([\d\.]+)/),
v = x.match(/maximum\-dpr=([\d\.]+)/);
w && (B = parseFloat(w[1]), A = parseFloat((1 / B).toFixed(2))),
v && (B = parseFloat(v[1]), A = parseFloat((1 / B).toFixed(2)))
if (!B && !A) {
var u = (J.navigator.appVersion.match(/android/gi), J.navigator.appVersion.match(/iphone/gi)),
t = J.devicePixelR
B = u ? t &= 3 && (!B || B &= 3) ? 3 : t &= 2 && (!B || B &= 2) ? 2 : 1 : 1,
if (E.setAttribute("data-dpr", B), !D) {
if (D = F.createElement("meta"), D.setAttribute("name", "viewport"), D.setAttribute("content", "initial-scale=" + A + ", maximum-scale=" + A + ", minimum-scale=" + A + ", user-scalable=no"), E.firstElementChild) {
E.firstElementChild.appendChild(D)
var s = F.createElement("div");
s.appendChild(D),
F.write(s.innerHTML)
J.addEventListener("resize",
function() {
clearTimeout(G),
G = setTimeout(H, 300)
J.addEventListener("pageshow",
function(b) {
b.persisted && (clearTimeout(G), G = setTimeout(H, 300))
"complete" === F.readyState ? F.body.style.fontSize = 12 * B + "px": F.addEventListener("DOMContentLoaded",
function() {
F.body.style.fontSize = 12 * B + "px"
z.dpr = J.dpr = B,
z.refreshRem = H,
z.rem2px = function(d) {
var c = parseFloat(d) * this.
return "string" == typeof d && d.match(/rem$/) && (c += "px"),
z.px2rem = function(d) {
var c = parseFloat(d) / this.
return "string" == typeof d && d.match(/px$/) && (c += "rem"),
} (window, window.lib || (window.lib = {}));
移动端案例、web前端项目实战(HTML5+css3)、webApp实例源码
闲暇之余，整理一些之前运用HTML5+css3开发的项目案例，pc端项目、web前端项目，移动端webApp实例~~~
移动端web网站(webApp滑屏效果—地产App—旅游web)、web前端开...
移动页面HTML5自适应手机屏幕宽度
http://www.mamicode.com/info-detail-864013.html
网上关于这方面的文章有很多，重复的东西本文不再赘述，仅提供思路，并解释一些其他文...
html5手机网站需要加的那些meta标签，手机网站自适应
1、移动网站要加的html5相关meta和标签
网页宽度默认等于屏幕宽度（width=device-width），
初始缩放比例（initial-sca...
手淘移动端适配的方案学习和相关思考
移动端适配方案学习和思考
vue做移动端适配，借助px2rem 插件方便的将px单位转为了rem
npm install px2rem-loader
lib-flexible –save
2、在项目入口文件main.js中引入lib-flexible
如何让网页自适应所有屏幕宽度
随着网络的快熟发展，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通...
WAP移动端页面显示，文字和内容等比缩放的实现
同一个页面，在不同显示比例下如何等等比缩放而使页面不会变形
比如同一个页面下，372px 和642px显示比例下文字大小和块元素高度会随着显示的比例来等比缩放
比例始终显示协调，不用重复调试，其中一个...
web移动端页面性能优化方案
众所周知，在互联网行业里，移动端占有的比例越来越高了，尤其实在电商领域，用户购物大部分在移动端。比如淘宝双11，在移动端支付的接近7成。这就要求我们产品质量越来越高，那对于我们前端工程师来说也是一个挑...
移动端Web页面适配方案
移动端Web页面，即常说的H5页面、手机页面、webview页面等。手机设备屏幕尺寸不一，本文针对移动端设备的页面，总结出在设计与前端实现上如何更好地适配不同屏幕宽度的移动设备。全文阅读请见：移动端W...
没有更多推荐了，