移动端字体设置rem，怎么设置

向右看齐 2023-01-02 03:25 238阅读 0赞

我们的手机屏幕宽度有时候不一致，字体设置一致就会展示样式有出入，对字体有兼容有两种方式

一：少部分手机适配px

html\{font-size:10px\}

@media screen and (min-width:321px) and (max-width:375px)\{html\{font-size:11px\}\}

@media screen and (min-width:376px) and (max-width:414px)\{html\{font-size:12px\}\}

@media screen and (min-width:415px) and (max-width:639px)\{html\{font-size:15px\}\}

@media screen and (min-width:640px) and (max-width:719px)\{html\{font-size:20px\}\}

@media screen and (min-width:720px) and (max-width:749px)\{html\{font-size:22.5px\}\}

@media screen and (min-width:750px) and (max-width:799px)\{html\{font-size:23.5px\}\}

@media screen and (min-width:800px)\{html\{font-size:25px\}\}

二、使用rem对各种手机做rem的适配

rem的大小是相对与页面的根元素的大小，rem能适配各种手机

在vue的main.js中引入  import  “@/utils/js/rem.js”

(function(d,c)\{

var e=d.documentElement,

b="orientationchange" in window?"orientationchange":"resize",

a=function()\{

var f=e.clientWidth;

if(!f)\{return\}

// if(f>750)\{

//     f=640

// \}

// e.style.fontSize=100\*(f/640)+"px"

if(f>750)\{

e.style.fontSize='100px'

\}else\{

e.style.fontSize=100\*(f/750)+"px"

\}

\};

if(!d.addEventListener)\{

return

\}

c.addEventListener(b,a,false);

d.addEventListener("DOMContentLoaded",a,false)

\})(document,window);//大概跟元素的字体大小为50px  1rem=100px

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 文本字体怎么设置颜色

这篇文章主要介绍了CSS 文本字体颜色设置方法(CSS color),需要的朋友可以参考下一、认识CSS 颜色（CSS color）这里要介绍的是网页设置颜色包含有哪些

深碍√TFBOYSˉ_/ 2024年04月01日 18:25/ 0 赞/ 68 阅读

相关移动端rem布局

rem布局（等比缩放布局） rem布局好处：不同设备下看起来比较协调。坏处：显示的内容并不会在大屏幕展示的内容多。 em : 是一个相对单位，1

分手后的思念是犯贱/ 2023年07月09日 13:29/ 0 赞/ 149 阅读

相关移动端字体设置rem，怎么设置

我们的手机屏幕宽度有时候不一致，字体设置一致就会展示样式有出入，对字体有兼容有两种方式一：少部分手机适配px html\{font-size:10px\} @me

向右看齐/ 2023年01月02日 03:25/ 0 赞/ 239 阅读

相关移动端布局 rem

移动端布局 rem rem定义 1、rem相对于 html元素字体大小来说的 2、rem的有点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以

曾经终败给现在/ 2022年11月19日 09:47/ 0 赞/ 266 阅读

相关移动端网字体rem设置

<script type="text/javascript"> var Dpr = 1, uAgent = window.navigator.u

水深无声/ 2022年08月22日 05:51/ 0 赞/ 256 阅读

相关如何在项目PC端和手机端使用的rem,怎么设置

做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办

素颜马尾好姑娘i/ 2022年06月07日 13:40/ 0 赞/ 227 阅读

相关移动端rem怎么用?

简单说明下，一般字体有4种，px,pt,em,rem,这里简单介绍两个px和rem。 ![Center][] ![Center 1][] 感觉菜鸟教

男娘i/ 2022年06月04日 08:17/ 0 赞/ 256 阅读

相关移动端的meta设置

为了确保适当的绘制和触屏缩放，需要在 `<head>` 之中添加 viewport 元数据标签。 <meta name="viewport" content="wid

待我称王封你为后i/ 2022年05月21日 07:49/ 0 赞/ 209 阅读

相关移动端meta标签设置

1、声明html编码格式 'UTF-8'， <meta charset="UTF-8">， 2、虚拟移动端页面容器 'viewport'， <meta name

蔚落/ 2022年05月17日 09:20/ 0 赞/ 215 阅读

相关 CSS字体透明度怎么设置？

在css中有很多好看的样式都可以实现，css设置出来的样式让整个网页看起来也会非常美观，今天的这篇文章就给大家来介绍一下在css中怎么设置字体的透明度，让你的字体在网页中...

红太狼/ 2021年01月28日 16:40/ 0 赞/ 863 阅读