pc端web、移动端web的字体大小、颜色、字体样式使用

Posted 2023-05-09

参考技术A 首先了解下px，em，rem的区别

px（像素）是绝对单位，页面按精确像素展示，使页面较稳定和相对固定一些。但这种方法存在一个问题，用户在浏览我们制作的web页面时，如果他改变了浏览器的字体大小，或是缩放、放大页面，这时会使页面布局被打乱。

em是相对单位，基准点为父节点字体的大小。上面说到使用px为单位的web页面会遇到的问题可以使用em来解决。
例如con2的父元素为con1，css中<strong>con1</strong>和<strong>con2</strong>的font-size都设置为2em；

可以看得出con1和con2的font-size样式都是2em，但是展现出来的字体大小不一样,因为默认情况下没有对字体进行重新设置的话，浏览器默认字体为16px，con1的2em就相当于32px，那么con2的2em就相当于con1的两倍也就是64px，所以con2字体比con1的大。

rem是相对于页面根元素的大小单位，我们只需给页面的根元素设置一个参考值，就可以在页面中根据参考值设置其他元素的大小，rem不会出现嵌套的繁琐。
设置html下1rem=10px

可以看得出1rem就是12px（浏览器下最小的字体为12px，当设置小于12px的字体，也默认为12px）
无论元素处于哪一层，都不会受到父元素的影响。

网站手机端最小字体是.16rem吗

px、em、rem

px 是固定的长度单位

em 是父元素的font-size(字体大小)的值，常用来设置首行缩进2em(2字符)

rem 是根节点(html，body)的font-size(字体大小)的值，可以用来做移动端的自适应。

为什么要适配移动端

px像素(pixel)

相对长度单位。相对于显示器屏幕分辨率而言。PC端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem

em

相对于父节点的font-size，会有一些组合的问题。比如你把body的font-size定义为50%，一般地会是8px。

那么你在body里字体大小就是 1em=8px

可当你定义了一个div，然后把字体设置成了75%，请问，现在的1em等于多少？

这个时候你会发现，原来他继承了body的值，现在字体更小了，变成了6px！

因为em是相对于父节点的单位，这么嵌套下去，你要数嵌套层级和比例，你会哭的饿...... (幸好出现了rem)

rem

相对长度单位，指相对于根元素的字体大小的单位。

rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。

使用的时候不需要重新计算rem此时的大小。

rem因为是css3增加的，所以ie8或以下请无视。

屏幕适配的几种方法(流式布局、固定宽度、响应式、通过viewport进行缩放、使用rem)

1、流式布局

在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点

往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。

流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

2、固定宽度

把页面设置成320的宽度，超出部分留白，这样做视觉，前端设计都挺挺开心，UI再也不用被流式布局限制自己的设计灵感了，前端也不用流式布局。

但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，浪费了宝贵的可用空间(放几个广告也好啊，我错了...)

还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小

3、响应式

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性

难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，因为这样

反而可以节约成本，不用再专门为自己的网站做一个web、app的版本。

4、通过viewport进行缩放

以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。

说实话，我觉得他和用接下去我们要讲的rem都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

5、使用 rem 相对字体

rem 等比例适配所有屏幕，通过js来判断当前屏幕大小，进而设置html的font-size

代码里面rem的值就是Ui设计稿上量的px除以100就是你代码中要写的rem值。

(function()

var currClientWidth,

fontValue,

originWidth;

originWidth = 750;//ui设计稿的宽度，一般750或640

__resize();

window.addEventListener('resize', __resize, false);

function __resize()

currClientWidth = document.documentElement.clientWidth;

if (currClientWidth > 768)

currClientWidth = 768;



if (currClientWidth < 320)

currClientWidth = 320;



fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);

document.documentElement.style.fontSize = fontValue + '%';



)();

// 当前假如当前分辨率是375， 设计稿分辨率是750

// 750/375=0.5

// 比例关系是0.5倍

// 再算一下你要换算1rem等于多少px，

// 假如我要100， 100/16=6.25

// 把这个换算的乘以刚才得出的比例

// 0.5*625=312.5

// 最后还拼接了一个百分号 = 312.5%

// 就是在375分辨率下 1rem = 312.5%

// 312.5% * 16px = 50px

前端设置使用 rem 最经典代码

下面代码在是中国平安工作时，身边的一个同事写的，兼容性特别好,移动端建议使用。

(function(doc, win)

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function()

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';

;

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

)(document, window)

代码说明：

docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';

例如：手机竖屏的宽度为 750px，则 fontSize = 50 * (750 / 375) = 100px

像素就可以直接使用rem，比如 font-size: 0.2rem; 即 font-size: 20px;

rem 做移动端适配

一般长度最好是除得尽的数值，例如40，50。

mimvp blog
var html = document.documentElement;

var htmlWidth = document.documentElement.clientWidth;

//html.style.fontSize = htmlWidth/27+'px'; //如：设计图1080宽度，将屏幕分为27份，每份为设计图的40px

html.style.fontSize = htmlWidth/15+'px'; //如：设计图750宽度，将屏幕分为15份，每份为设计图的50px

*

margin: 0;

padding: 0;

list-style: none;



.box

width: 7.5rem; /* 相当于设计图上的7.5*50px 设置的值=设计图上的长度/每份的长度 */

height: 2.5rem; /* 相当于设计图上的2.5*50px */

border: 1px solid #000;



代码说明：

//html.style.fontSize = htmlWidth/27+'px'; // 如：设计图1080宽度，将屏幕分为27份，每份为设计图的40px

html.style.fontSize = htmlWidth/15+'px'; // 如：设计图750宽度，将屏幕分为15份，每份为设计图的50px

width: 7.5rem; /* 相当于设计图上的7.5*50px 设置的值=设计图上的长度/每份的长度 */

height: 2.5rem; /* 相当于设计图上的2.5*50px */ 参考技术A 是16rem的，网站手机端最小字体是.16rem。 参考技术B 是的。
扩展资料：手机，全称为移动电话或无线电话，通常称为手机，原本只是一种通讯工具，早期又有“大哥大”的俗称[1]，是可以在较广范围内使用的便携式电话终端，最早是由美国贝尔实验室在1940年制造的战地移动电话机发展而来。1958年，苏联工程师列昂尼德.库普里扬诺维奇发明了ЛК-1型移动电话。1973年，美国摩托罗拉工程师马丁·库帕发明了世界上第一部商业化手机。
手机通讯历经2G时代、3G时代，迄今为止已发展至4G时代了，而5G时代也紧随其后，国内已经出现5G的商用。
中文名
手机
外文名
Mobile Phone
Cellphone
别名
移动电话、无线电话
发明日期
1973年
著名品牌
华为、OPPO、vivo、HTC、荣耀、小米、三星、苹果等 参考技术C 网站手机端最小字体不是16rem，最小字体已经达到了10rem 参考技术D 网站手机端最小字体是16rem吗？网站手机端最小字体好像是12rem,比这个还小的，我没有看到过,大概最小就是12rem。