移动端文字大小自动适应-js方式

最新推荐文章于 2021-03-19 11:43:01 发布
最新推荐文章于 2021-03-19 11:43:01 发布
阅读量207 收藏
点赞数
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzf2576/article/details/103904136
版权

一、输入以下js代码

<script>
	document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px';
</script>

二、使用时，字体大小单位用rem

<style>
	font-size:0.5rem;
</style>
nodeit
关注
前端学习笔记 - 移动端Web开发
fengxm0309的博客
10-18 1139
移动端基础 浏览器现状 PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器 移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌 浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样 兼容移动端主流浏览器，处理Webkit内核浏览器即可
javascript 文字大小自动适应文本框 （文字大小自动调整）
weixin_30834783的博客
07-21 1010
javascript 文字大小自动适应文本框 （文字大小自动调整） TOC 思考 思考一：面积法 思考二：微调法 代码 在进行类似微博墙之类的展示页面中，经常会遇到这样的需求：在固定大小的区域放入字数不定的文字，但是要求字体可以自动改变大小来自动填充这些区域。如下所示： 遇到这种情况怎么办呢？ 思考 思考一：面积法 看到需求我的第一...
改变字体大小实现自适应之js方案A
weixin_30799995的博客
03-27 401
一、元素大小有两种写法 1、写结果：设计师给的移动端页面sketch设计稿一般是750px宽度，在sublime编辑器里，设置cssrem或rem-unit插件为56px的字体大小。做页面时，设计稿是多少px，就写多少px，sublime会把px自动转换成rem，省略口算或心算。 2、写公式 A、如果设计师给尺寸为375px的sketch设计图，某DIV宽120px，就可以写120rem...
移动端字体自适应
qq_17002929的博客
04-13 453
http://www.qdfuns.com/notes/23446/2b662f76e1eb76a83057ecc7eb2eb543.html
移动端字体大小固定显示
m0_46977781的博客
06-12 267
此方法需要首先用js在head 添加自定义属性保存DPR值； [data-dpr='2'] body, [data-dpr='2'] a, [data-dpr='2'] input{ font-size: 24px; } [data-dpr='3'] body, [data-dpr='3'] a, [data-dpr='3'] input{ font-size: 36px; }
IFRAME高度进行自适应 javascript脚本编写【JAVASCRIP】
歪德的博客
04-28 382
function iFrameHeight() {         var ifm= document.getElementById("reportIframe");         var subWeb = document.frames ? document.frames["reportIframe"].document : ifm.contentDocument;         if
33.（leaflet篇）leaflet移动端访问地图时文字很小.zip
08-16
总的来说，解决Leaflet地图在移动端文字过小的问题通常涉及CSS样式调整、利用Leaflet的内置功能以及可能的图层优化。开发者需要综合考虑用户体验和视觉效果，以确保地图在不同设备上都易于使用。
text-show插件，容器大小固定，根据文字多少来调节显示的字体大小
10-13
3. **CSS样式控制**：虽然插件会自动调整字体大小，但开发者仍然需要通过CSS来设定容器的固定大小以及文本的基本样式，例如颜色、行高、对齐方式等。 4. **文本格式化**：`text-show`专注于调整字体大小，但若需...
移动端内容超出
10-26
`css`目录包含了样式表，`Links`可能是链接资源，`imgs`包含图片，`.idea`是开发环境的配置文件，而`js`目录则包含了JavaScript脚本。这些文件可能包含了实现上述解决方案的代码，具体细节需要查看源代码才能进一步...
纯JS实现的水印库支持移动端pc端
08-10
3. **适应性布局**：为了支持移动端和PC端，库需要能够根据设备的屏幕尺寸和方向自动调整水印的位置和大小。这通常通过响应式设计和媒体查询来实现，确保水印在不同设备上都能清晰可见。 4. **性能优化**：在处理...
一篇真正教会你开发移动端页面的文章(二)
tongluren381的博客
03-19 705
来源：HcySunYang http://hcysun.me/2015/10/19/一篇真正教会你开发移动端页面的文章-二/ 之前写了一篇文章《一篇真正教会你开发移动端一面的文章(一)》。那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面 好了，让我们开始吧，从哪里开始呢？从设计图开始，即PSD稿件：移动端PSD稿件的尺寸肯定较之PC端的PSD稿件不同，具体体现在设计图的尺寸上，现在移动端的设计图尺寸大多...
移动端页面开发适配 rem布局原理
风中追风
03-19 4710
我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同 ，适口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。需要知道的一些概念：物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我们平时说的分辨率；设备独立像素(density-independent pixel)
从网易与淘宝的font-size思考前端设计稿与工作流
weixin_34151004的博客
10-15 1094
本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。 1. 问题的引出 最近阅读白树的博文《移动web资源整理》时，他在博文中有一段指出，如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段针对各个分辨率范...
JavaScript自适应调整文字大小
weixin_33958585的博客
04-07 342
2019独角兽企业重金招聘Python工程师标准>>> ...
JS：document.documentElement对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
热门推荐
鬼眼邪神
05-10 2万+
document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement.clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 浏览器兼容性 所有浏览器解释都一样。 document.documentElement.offsetWidth 获取DOM文档的根节点html元素对象
用JavaScript实现字体大小屏幕自适应
December_shi的博客
01-15 1735
用JavaScript实现字体大小屏幕自适应 <script> window.addEventListener('resize',function(){ console.log(111); // 获取当前页面的根元素 let doc=document.documentElement; // 获取当前设备的视口宽度 let view_width=doc.clientWidth; // 计算 fo
字体大小自适应纯css解决方案
weixin_33797791的博客
07-04 4633
viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。 “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大 兼容性：chrome 2...
移动端根据屏幕大小自动设置body字体大小
FireBird_one的博客
12-13 2157
(function (doc, win) {             var docEl = doc.documentElement,                 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',                 recalc = function ()
移动端前端H5模板 - 自适应响应式H720手机网站源码
4. 自适应响应式设计：响应式设计是一种网页设计的方法论，它使得网站能够自动适应不同尺寸和分辨率的设备。自适应则更进一步，不仅响应设备尺寸的变化，还能根据用户的行为和设备的环境进行适配。比如，在手机网站...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值