本文将为您提供关于wap手机端页面根据dpr和宽度计算出font-size对应数值_html/css_WEB-ITnose的详细介绍，同时，我们还将为您提供关于-webkit-text-size-ad
本文将为您提供关于wap手机端页面根据dpr和宽度计算出font-size对应数值_html/css_WEB-ITnose的详细介绍，同时，我们还将为您提供关于-webkit-text-size-adjust: none;_html/css_WEB-ITnose、background-size 用法详解_html/css_WEB-ITnose、background-size_html/css_WEB-ITnose、CSS > 行内格式化上下文中的各种高度计算_html/css_WEB-ITnose的实用信息。
本文目录一览：- wap手机端页面根据dpr和宽度计算出font-size对应数值_html/css_WEB-ITnose
- -webkit-text-size-adjust: none;_html/css_WEB-ITnose
- background-size 用法详解_html/css_WEB-ITnose
- background-size_html/css_WEB-ITnose
- CSS > 行内格式化上下文中的各种高度计算_html/css_WEB-ITnose
wap手机端页面根据dpr和宽度计算出font-size对应数值_html/css_WEB-ITnose
最近在进行公司的wap端首页改版和添加活动页面，为了做的效果更好一些，就参考淘宝和京东的wap版，然后对淘宝的wap做了一些分析，淘宝的wap触屏版做的自适应和兼容性很不错，于是整理了下。
wap手机端页面根据dpr和宽度计算出font-size对应数值表如下：
| dpr | 最小宽度320px | 最大宽度540px | 系数 |
| 1 | 20px | 33.75px | 0.0625 |
| 2 | 40px | 67.5px | 0.125 |
| 3 | 60px | 101.25px | 0.1875 |
备注：
1、是按照倍数关系增加的
2、手机淘宝就是按照这种方式计算的m.taobao.com
立即学习“前端免费学习笔记（深入）”；
3、因为我PHPer，不是专业的前端，如果有错，请指导下，谢谢。
附件：
1、js代码计算方式：
//通过手机屏幕dpr和手机宽度来确定font-size的值
function autorun() {
//初始值
var default_width = 20;
var default_dpr = 1;
var dpr = window.devicePixelRatio;
var width = screen.width;
var html_style = '''';
var body_style = '''';
//dpr倍数
var difference = dpr / default_dpr;
//计算
if (difference === 1 || difference === 2 || difference === 3) {
var default_min_size = 20 * difference;
var default_max_size = 33.75 * difference;
var default_coefficient = 0.0625 * difference;
html_style = get_font_size(width, default_min_size, default_max_size, default_coefficient);
body_style = ''font-size:'' + difference * 12 + ''px'';
} else {
html_style = get_font_size(width, 20, 33.75, 0.0625);
body_style = ''font-size:12px'';
}
//进行dom操作
$("html").attr(''style'', html_style);
$("body").attr(''style'', body_style);
}
/**
* 通过手机屏幕dpr和手机宽度来确定font-size的值
* @param {int} width
* @param {int} default_min_size
* @param {int} default_max_size
* @param {int} default_coefficient
* @returns {String}
*/
function get_font_size(width, default_min_size, default_max_size, default_coefficient) {
var style = '''';
//屏幕宽度需要在320-540之间进行计算
if (width
style = ''font-size:'' + default_min_size + ''px'';
} else if (width > 540) {
style = ''font-size:'' + default_max_size + ''px'';
} else {
var difference = width - 320;
var fontsize = default_min_size + difference * default_coefficient;
style = ''font-size:'' + fontsize + ''px'';
}
return style;
}
2、参考文章：
http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
3、参考JS函数：
var dpr = window.devicePixelRatio; //获取手机屏幕dpr
var width = screen.width; //获取手机屏幕宽度
4、测试工具：
使用谷歌自带开发者中心的手机模拟测试
-webkit-text-size-adjust: none;_html/css_WEB-ITnose
感谢各位大神路过。
问题描叙：
chrome内核浏览器 font-size 网上搜索的方法为：添加 -webkit-text-size-adjust: none;
但是经过尝试还是无效。求原因或者方法
回复讨论(解决方案)
确实无效，找了好久都是 -webkit-text-size-adjust: none;。有木有大神站出来说个真理啊！！！
查了很久都是-webkit-text-size-adjust: none; 但是不管放前面还是在字体旁边设置都没用啊
background-size 用法详解_html/css_WEB-ITnose
background-size属性用法详解:
此属性用来控制控制背景图片的大小，下面通过代码实例详细介绍一下此属性的用法，希望能够对需要的朋友带来一定的帮助。
background-size属性具有两个参数（在这里先不把cover和contain计算在内），参数值既可以是精确数值形式也可以是百分比形式，也可以是默认的值auto，例如:
background-size:200px 100px;background-size:50% 50%;background-size:auto;
下面对Background-size属性的参数做一下简单的介绍:
如果只有一个参数，那么此值用来规定背景图片的宽度，这个时候背景图片的高度值是按照宽度进行等比例缩放。
如果提供两个参数，那么第一个参数用来规定背景图片的宽度，第二个参数用来规定背景图片的高度。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; } .test{ background-image:url(mytest/demo/small.jpg); background-size:200px 100px; background-repeat:no-repeat; } </style> </head> <body> <ul> <li></li> </ul> </body> </html>Background-size属性带有两个参数，第一个参数规定背景图片的宽度为200px，第二个参数规定背景图片的高度为100px。
再看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; margin-top:10px;} .first{ background-image:url(mytest/demo/small.jpg); background-size:200px; background-repeat:no-repeat; } .second{ background-image:url(mytest/demo/small.jpg); background-size:600px; background-repeat:no-repeat; } </style> </head> <body> <ul> <li></li> <li></li> </ul> </body> </html>以上代码中，Background-size属性之规定了一个参数，那么这个参数用来规定背景图片的宽度，背景图片的高度根据宽度值进行等比例缩放，如果背景图片的尺寸超过容器，将会被裁切。
Background-size属性值如果是auto的时候，就是背景图片按照原尺寸显示，这里就不用实例演示了。
下面再来介绍一下此属性的cover和contain属性值。
一.cover属性:
将属性值设置为cover之后，将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器，不过超出的部分将会被裁切。
cover的英文也有覆盖的意思，说这一点就是有助于大家的记忆和理解。
代码实例如下:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; margin-top:10px;} .test{ background-image:url(mytest/demo/small.jpg); background-size:cover; background-repeat:no-repeat; } </style> </head> <body> <ul> <li></li> </ul> </body> </html>在以上代码中，背景图片可以最小程度的完全覆盖容器，如果背景图片的和容器的长宽比例不一样，那么必然会出现在横向或者纵向上超出容器的情况，那么超出的将会被隐藏。
一.contain属性:
此属性值可以将背景图片放大或者缩小。
和cover属性类似，都是可以将图片等比例放大或者缩小，但是cover是最小限度的将容器的覆盖，而contain只是要求某一个方位上将容器覆盖，比如纵向或者横向能够最小程度将容器覆盖。
代码示例如下:
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; margin-top:10px;} .test{ background-image:url(mytest/demo/small.jpg); background-size:contain; background-repeat:no-repeat; } </style> </head> <body> <ul> <li></li> </ul> </body> </html>在以上代码中，背景图片进行了等比例缩放，由于在纵向上能够最先达到填充容器元素，所以在横向上就放弃尝试。
原文地址是:background-size 用法详解 一章节。
background-size_html/css_WEB-ITnose
background-image:url(bg.jpg);<br />background-size:cover;/*等比例拉伸 铺满最短边，长边裁剪*/<br />background-size:contain;/*铺满最短边，长边空着*/
background-size: 100% 80px;/*横向铺满，纵向80px*/
background-size:150px 80px;/*横向150px，纵向80px*/
background-size:40% 60%;/*横向40%，纵向60%*/
浏览器的兼容性
支持浏览器：ie(9)、firefox、chrome、opera、safari。
/*Mozilla*/-moz-background-size:auto||<length>||<percentage>||cover||contain;/*Webkit*/-webkit-background-size:auto||<length>||<percentage>||cover||contain;/*Presto*/-o-background-size:auto||<length>||<percentage>||cover||contain;/*W3c*/background-size:auto||<length>||<percentage>||cover||contain;
CSS > 行内格式化上下文中的各种高度计算_html/css_WEB-ITnose
前言碎碎语：标题问题在昨天困扰了笔者很久很久，早上把问题提到了各网络也暂时没有回复。因为明天要早起飞异地参加一场校招面试，笔者还是很紧张的，但奈何问题不解决寝食难安……所以还是卯起劲重新思考这个问题，算是暂时有了一个自己比较认可以及清晰的答案，与各位读者分享。如您有不同观点想法意见建议，恳请斧正！
正式探讨之前，我们观察一个现象（在 Chrome 下的表现，其他浏览器下的表现和计算可能有细微差别）：
上图对应的 HTML 是（之后的探讨均基于此）：
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>Line Height</title><style>body { margin: 0; font: 32px/1 ''Microsoft YaHei'';}div { width: 400px; margin: 30px auto; outline: 1px solid black; background: #008E59;}img { height: 80px; margin-top: 10px;}</style></head><body> <div> <span>Some Text</span> <img src="picture.jpg" alt=""/> </div></body></html>我们来计算下 DIV 和 SPAN 的高度
document.getElementsByTagName(''div'')[0].offsetHeight//93document.getElementsByTagName(''span'')[0].offsetHeight//42对于此图，笔者产生如下疑问：
立即学习“前端免费学习笔记（深入）”；
line-height 为 32px，为何 SPAN 的高度为 42px？
DIV 的高度 93px，比 IMG 高度加外边距 90px 以及 SPAN 高度 42px 都要大，如何计算的？
图片和文本下的空白（即便没有文本一样存在）是如何产生的？
假设我们把 IMG 删除，HTML 部分改为：
<body> <div> <span>Some Text</span> </div></body>
此时来计算：
document.getElementsByTagName(''div'')[0].offsetHeight//32document.getElementsByTagName(''span'')[0].offsetHeight//42新问题又来了：
DIV 的子元素高度为 42px，为何没有“撑起” DIV 的高度？
以上问题就是本文要探讨的了。覆盖了五个知识点：
行内盒（或行内不可替换元素）的高度
行内可替换元素的高度
行盒的高度
行距与行高
建立行内格式化上下文的块盒的 auto 高度
所以在探讨之前，笔者已假设您知道这些概念：行内盒、行内不可替换元素、行内可替换元素、行盒、行内格式化上下文。如果您还有点不清楚，我们可以快速补习下：
可替换元素、不可替换元素
简单地讲，可替换元素是指须根据其标签和属性来决定具体显示内容的元素，如本文中会探讨的 IMG 元素，其具体显示内容由 src 等属性决定； 不可替换元素则是内容直接呈现的元素。如本文会探讨的 DIV 和 SPAN 等。
块盒
此概念是块格式化上下文的内容，要解释起来就更复杂啦，笔者粗陋地给您一个描述：块盒通常是 display: block 的不可替换元素。
行内级元素、行内级盒、行内盒、行内格式化上下文
display: inline|inline-table|inline-block 产生行内级元素。行内级元素生成行内级盒，而这些盒会参与行内格式化上下文。
display 值是 inline 的不可替换元素会生成一个行内盒。
不是行内盒的行内级盒被称为原子行内级盒。
行盒
在行内格式化上下文中，盒从包含块的顶部一个接一个地水平摆放。包含了一行里所有盒的矩形区域被称为行盒。一个段落就是多个行盒的垂直堆叠。
因此，我们可以得到下图（大致描摹）：
现在开始计算！
1 行内可替换元素和文档流内行内块可替换元素高度计算
W3C 有明确规范，如下：
如果 height 和 width 计算值均为 auto 且该元素有固有高度，那么该固有高度为 height 使用值。
否则，如果 height 计算值为 auto，且该元素有一个固有比例，则 height 的使用值为：
width 使用值 / 固有比例
否则，如果 height 计算值为 auto，且该元素有固有高度，那么该固有高度为 height 使用值。
否则，如果 height 计算值为 auto，但以上情况均不符合，那么 height 的使用值必须设定为一个最大矩形的高度，该矩形比例为2:1，高度不超过150px，且宽度不大于设备宽度。
因此，在我们的实例中，IMG 盒的高度为 80+10 = 90px。
2 行内盒的高度计算
“高度”一词在这里颇有歧义，笔者认为，总共可以有三种概念需要辨析：
行内盒的内容区域高度
行内盒的盒高度
计算行盒高度时的行内盒的盒高度
您可能对第二和第三解释抱有疑问，但我们先搁置怀疑，把清楚明白的东西先解决。
当我们用 JavaScript 去获取一个行内盒的 offsetHeight 值时，如我们上面所做的：
document.getElementsByTagName(''span'')[0].offsetHeight笔者将此高度称作“行内盒的盒高度”，类比于我们所熟知的块盒盒高度。其计算值是：
内容区域高度 + 上下边框 + 上下内边距 = 行内盒的盒高度
边框和内边距的宽度默认为 0，否则为我们自己指定，但“内容区域高度”是怎么计算的呢？
W3C 这么说：
height 不适用。内容区域的高度应基于字体，但本规范没有指定如何。用户代理可能，比如说，使用行高盒 EM-Box 或字体的最大上端部 Ascender 和下端部 Descender。（后一种会确保有部分在行高盒之上或之下的字符仍然落在内容区域内，但会导致不同字体有大小不一的盒子；前者则确保作者可以控制相对于 line-height 的背景设计，但也导致字符绘制在其内容区域之外。）
言下之意：
height 属性无效
行内盒内容区域高度在规范里面没有定义，浏览器可以自己折腾
既然规范没有明确规定计算，我们让浏览器实测一下。笔者浏览器测试如下：
Chrome 42
IE11 42
Firefox 43
如果我们更改字体，假设应用如下 CSS
body { font-family: Simsun; }Chrome 33
IE11 37
Firefox 35
而如果我们修改 line-height，以上结果均不受影响。
笔者也曾疑惑，这个 offsetHeight 就是内容区域高度吗？答案：是。笔者的验证方法是基于 W3C 如下规定：
尽管不可替换元素的外边距、边框以及内边距不纳入行盒的计算，它们仍然渲染在行内盒的周围。这意味着如果 line-height 指定的高度小于被包含盒的内容高度，内边距和边框的背景和颜色可能“流进”毗邻的行盒。用户代理应当按文档顺序渲染这些盒。这会造成后面的盒的边框绘制在前面盒的边框和文本上。
您可以用以下代码实测，会发现红色行内盒的背景溢出到了黑色行内盒所在的行盒。
<div> <span>Some Text</span> <br/> <span>Some Text</span></div>
可知内容区域高度，即行内盒没有内边距和边框时的 offsetHeight。
因此总结论是：
行内盒的内容区域高度计算没有统一的标准，不同的字体或者不同的浏览器都可能导致不同的结果，且其高度与 line-height 无关。
由此我们无法确切地获得一个跨浏览器的行内盒的内容区域高度。同样我们也无法确切获得一个跨浏览器的行内盒高度（因为其计算式里面就包括了不定变量内容区域高度）。
但问题来了，不同浏览器都采用不同的行内盒内容区域高度，又如何能统一计算行盒以及块容器的高度呢？这个问题便导致了笔者在上面所提到的“计算行盒高度时的行内盒的盒高度”概念。
我们进入下一个话题，行盒高度计算。
3 行盒高度计算
根据规范，行盒的高度决定如下：
计算行盒内每个行内级盒的高度。对于可替换元素、行内块元素以及行内表格元素，高度是其外边距盒的高度；对于行内盒，高度是其 line-height。
行内级盒根据其 vertical-align 属性垂直对齐。如果它们对齐 top 或 bottom，它们必须以能最小化行盒高度的方式对齐。如果这些盒足够高，则有多种解决方案并且 CSS2.1 没有规定此行盒的基线的位置。
行盒高度是最上盒顶部到最下盒底部的距离。
懂了：W3C 尽管允许浏览器有自己的行内盒内容区域计算方式，但统一了一个行盒高度的计算方式：
计算行盒的高度时，针对行内盒，高度直接取 line-height。行内盒可以有边框、内边距、外边距，然而跟行盒的高度完全没关系！
根据此规定，我们很快可以得出，计算行盒高度时，SPAN 盒的高度取 32px。
接着，由于我们的 vertical-align 是默认的 baseline，因此，应当把盒的基线同父盒的基线对齐。如果盒没有基线，对齐盒的下外边距边缘与父盒的基线。也就是说，把 SPAN 盒的基线同 DIV 盒的基线对齐，把 IMG 盒的下外边距边缘同 DIV 盒的基线对齐。
下图是字体的基线、上下端线等位置信息
图片来源：http://blog.justfont.com/
笔者作图如下：
假设我们设 DIV 盒的基线是 0，则 IMG 盒的下边缘同 DIV 盒基线对齐；上边缘（上外边距边缘顶部）在高于基线 90px 处。而 SPAN 盒由于其基线对齐 DIV 盒基线，故其行盒下边缘略低于基线。
整个行盒的高度即 IMG 盒上边缘到 SPAN 盒下边缘。假设没有 IMG 元素，则高度为 SPAN 盒的 line-height。
但读者您可能注意到了，29 和 -3 是怎么得来的呢？下面，笔者带您算！
4 行距和行高计算
29 和 -3 两值是在计算行距和行高后得来的。我们先来看规范：
CSS 假设每种字体都由字体特性来指定一个基线之上的特性高度和之下的特性深度。本节中我们用A表示（给定字体给定字号的）高度，用D表示深度。同时定义 AD = A + D，即从顶部到底部的距离。（参见下面如何找到TrueType和OpenType字体的A和D）注意该字体的这些特性是就整个而言的，无须对应任何个别字符的上端部和下端部。
用户代理必须在一个不可替换行内盒中依照字符的相应基线对齐各个字符。接着，就每个字符来决定A和D。注意单个元素的字符可能来自于不同字体因此不见得所有的A和D一样。如果行内盒完全不包含字符，则被视为包含了一个具有元素首个可用字体的A和D的支柱（一个零宽度的不可见字符）。
接着对每个字符添加行距L，其中 L = line-height - AD。行距的一般添加到A之上，另一半添加到D之下，从而赋予字符以及其行距一个基线之上的完整高度 A'' = A + L/2，以及完整深度 D'' = D+ L/2。
注意。L可能为负。
包含了所有字符以及字符两侧半行距的行内盒的高度正是 line-height。
我们在上述规定中接触到了这些概念：特性高度 A，特性深度 D，顶部到底部距离 AD，完整高度 A''，完整深度 D''，行距 L。
关于特性值，笔者 Google 到一个网站，推荐读者使用：
http://fontsgeek.com/
不得不吐槽下，国内真的很难找到这样专业精致的字体网站（也可能是我的打开方式不对 >_
好，我们可以获得我们实例中 Microsoft YaHei 的字体特性了：Dcsender -536；Height 2703。
AD 即内容区域高度，在本例中是 42
D 即字体下端（基线之下）高度，为 42*(536/2703) = 8
L = 32 - 42 = -10
故，D'' = 8 + -10/2 = 3
即知行内盒的下边缘在基线之下 3px。同时行内盒的高度被视为 32px，故亦知其上边缘在基线之上 29px 处。
我们说啦，整个行盒的高度即 IMG 盒上边缘到 SPAN 盒下边缘。所以得行内盒高度为 90 + 3 = 93px。
5 建立行内格式化上下文的块盒的 auto 高度
根据 W3C CSS2.1:10.6.3，该高度是从其上内容边缘到其最后一个行盒的下边缘。只考虑文档流内子盒，绝对定位和浮动子盒应被忽略，相对定位子盒不考虑位移，子盒可以是匿名盒。
在本例中，DIV 盒的行内格式化上下文仅有一个行盒，故其高度取该行盒高度，93px。
我们今天的关于wap手机端页面根据dpr和宽度计算出font-size对应数值_html/css_WEB-ITnose的分享就到这里，谢谢您的阅读，如果想了解更多关于-webkit-text-size-adjust: none;_html/css_WEB-ITnose、background-size 用法详解_html/css_WEB-ITnose、background-size_html/css_WEB-ITnose、CSS > 行内格式化上下文中的各种高度计算_html/css_WEB-ITnose的相关信息，可以在本站进行搜索。
本文标签：
