Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >微信小程序:字体保持大小

微信小程序:字体保持大小

作者头像
用户1075292
发布于 2018-01-23 02:57:34
发布于 2018-01-23 02:57:34
2.5K0
举报
文章被收录于专栏:听雨堂听雨堂

小程序和网页差不多,前台用wxml把内容摆好,然后用css调整样式。所以和web一样,必须要能够精确控制每一个元素的大小。在Web中,通过CSS基本达到了像素级的控制。但在小程序中,情况有所不同。下面是我通过微信提供的事件分析,把近7天访问的终端的分辨率的情况汇总了一下:

有些看起来很小,其实并不是老机子,而是手机和电脑在分辨率上有所差别。除了px,还有dp、vw、rem等一系列尺寸标准。

http://blog.csdn.net/zhoudailiang/article/details/50505362

https://segmentfault.com/q/1010000002727589/a-1020000002728503

尽管有一系列单位,但是经过试验,无法达到像微信那样,不管怎么调整系统字体大小,自身字体仍然不变的效果。目前的策略,仍然只能使用rpx,按照测试手机的特大字体效果设置。

我的小程序:简单账本,手机扫码或者在小程序主页搜索“简单账本”即可

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-02-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序布局单位的使用
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为750 px,则共有个750 物理像素,则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素
用户2305175
2018/06/24
3.1K0
移动端开发的几点建议
说实话,我一点都不想了解这些名词到底有着什么样的解释,只想知道怎么让开发的页面能适配不同的移动端设备。简单点说,我想知道怎么获取设备的真实开发尺寸(根据这几天查资料所得,这个概念叫逻辑像素)。
谭光志
2020/09/28
9900
微信小程序----解析px、rpx、rem、vw实现页面布局
---- 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! PX px:绝对单位,页面按精确像素展示。 ---- 在PC端经常使用的单位,不用计算,直接使用,一般情况不用考虑设计图纸的来改变页面的大小。就直接采用px,方便快捷但是不能自适应。 RPX rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。 ---- 微信的自适应单位,同时微信规定:屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物
Rattenking
2021/02/01
6K0
微信小程序----解析px、rpx、rem、vw实现页面布局
编写第一个小程序页面
右边则是工程代码编写的地方,pages目录下存放着所有页面相关的文件或目录,index目录和logs目录就代表着以上的两个页面:
端碗吹水
2020/09/23
5550
编写第一个小程序页面
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
1、布局特点:不管浏览器尺寸具体是多少,网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态(定宽度)布局的,也就是设置了min-width,这样的话,如果小于这个宽度就会出现滚动条,如果大于这个宽度则内容居中外加背景,这种设计常见与pc端。 2、设计方法:   PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;   移动设备:另外建立移动网站,单独设计一个布局,使用不同的域名如wap.或m.。
何处锦绣不灰堆
2020/05/29
11K0
为什么你永远不应该在CSS中使用px来设置字体大小
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
前端小智@大迁世界
2023/04/06
1.8K0
为什么你永远不应该在CSS中使用px来设置字体大小
WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧
本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问题的解决方案,还请大家购买书籍进行学习实践,该系列博文的发布已得到七月老师的授权许可
Nian糕
2018/08/21
1.2K0
WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧
微信小程序开发--总结
本人一直使用的是微信开发者工具,当然Sublime和Atom这些都是可以的,看个人习惯。微信开发者工具主要是API有自动提示方便些,不过后期熟悉了,都还Ok。不过9月1号更新的那个版本真的好卡!! 虽然增加了关联腾讯云及测试,然这些对绝大部分开发者并没什么卵用~~
Clearlove
2019/08/29
5.8K0
pt、rpx、px、em、rem、%、vh、vw的区别
前端有很多尺寸单位,比如: pt、rpx、px、em、rem、%、vh、vw等,我们需要深入了解它们的工作原理和使用情况。以下是详细的描述以及它们之间的区别:
星辰大海c
2023/11/08
2.4K0
前端:CSS字体大小 px、em、rem的区别
1px的长度表示显示器中一个像素(pixel)的长度,实际显示的效果和显示器的 DPI(Dot Per Inch,每英寸像素数)有关,DPI越大每英寸的像素数越多,每个像素的实际大小越小。通常来说分辨率越高的屏幕 DPI也就越高,所以高分辨率屏幕显示的图标和字体都要更小一些。
渔父歌
2020/03/26
2.2K0
【愚公系列】《微信小程序与云开发从入门到实践》008-WXML与WXSS
在微信小程序的开发中,WXML(WeiXin Markup Language)和WXSS(WeiXin Style Sheets)是两个至关重要的技术,它们分别负责小程序的结构与样式设计。WXML作为微信小程序的标记语言,类似于HTML,帮助开发者定义页面的布局和结构;而WXSS则是其样式表语言,提供了丰富的样式设置功能,使得小程序的界面更加美观和用户友好。
愚公搬代码
2025/01/12
1470
《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维
《微信小程序七日谈》系列文章: 本系列的文章并非初学教程,而是笔者在具体开发过程中遇到的问题以及部分解决方案。 上篇文章第一天:人生若只如初见简单记录了笔者初步上手开发微信小程序遇到的一些问题,其中提到了wxss的部分细节问题。这篇文章以笔者在开发小程序响应式UI当中遇到的一些问题为例,简单记录一下使用wxss为响应式开发带来的一些模式和思维上的改变。 rem的重定义 前端工程师对rem非常熟悉,rem是以html元素的font-size为基准的尺寸计量单位。rem方便了开发者对响应式UI的尺寸进行统筹管
寒月十八
2018/01/30
1.2K0
《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维
微信小程序开发学习笔记(二)——小程序框架、组件、WXML
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
张果
2023/04/28
2K0
微信小程序开发学习笔记(二)——小程序框架、组件、WXML
CSS样式中长度单位含义解析:rpx、px、vw、vh、em、rem、pt
在 CSS 样式中,有几种常见的长度单位,包括 rpx 、 px 、 vw 和 vh 等,含义解析如下:
小蓝枣
2024/05/26
6.9K0
IT课程 CSS基础 021_值类型、单位、大小、颜色
在CSS中,长度单位用于表示尺寸和距离,可以应用于各种属性,如宽度、高度、边距、填充等。
zhaoJian.Net
2024/04/03
1080
前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配
前端的一大工作内容就是去兼容页面在不同内核的浏览器,不同的设备,不同的分辨率下的行为,使页面的能正常工作在各种各样的宿主环境当中。
Sb_Coco
2019/09/06
3.1K0
面试官:px、em、rem、vw、rpx 之间有什么区别?
做移动端布局时,希望页面可以做到用户的手机屏幕越大、看见的页面元素就越大。因此,只能使用相对长度单位。
万少
2025/02/11
840
面试官:px、em、rem、vw、rpx 之间有什么区别?
微信iOS多设备多字体适配方案总结
一、背景 2014下半年,微信iOS版先后适配iPad, iPhone6/6plus。随着这些大屏设备的登场,部分用户觉得微信的字体太小,但也有很多用户不喜欢太大的字体。为了满足不同用户的需求,我们做了全局字体设置功能,在【设置-通用-字体大小】这里修改设置后,微信大部分界面都会随之缩放。 二、多设备适配 1、各设备的逻辑分辨率: 关于iphone6/6plus的物理分辨率、逻辑分辨率、屏幕物理尺寸、PPI等资料,很多文章已经有详细说明了,这里就不再累赘。对于终端开发
微信终端开发团队
2018/01/29
4.1K0
微信iOS多设备多字体适配方案总结
一起脱去小程序的外套 - 微信小程序架构解析
导语 微信小程序的公测掀起了学习小程序开发的浪潮,天生跨平台,即用即走、媲美原生体验、完善的文档、高效的开发框架,小程序给开发者带来了很多惊喜。通过这篇文章和大家一起分析小程序的架构,分享开发经验。 一、小程序介绍 1、小程序特点 2、小程序演示 视频地址: https://v.qq.com/x/page/w0353d7co6y.html 3、小程序为什么那么快 Page Frame Native预先额外加载一个WebView 当打开指定页面时,用默认数据直接渲染,请求数据回来时局部更新 返回显示历史
腾讯Bugly
2023/04/02
2.1K0
一起脱去小程序的外套 - 微信小程序架构解析
微信小程序初体验(上)
这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程,前面已经有几位前辈的文章珠玉在前,我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧。 在结构和样式方面,小程序提供了一些常用的标签与控件,比如: view,小程序主要的布局元素,类似于html标签的div,你也完全可以像控制div那样去控制view。 scroll-view,你要滚动内容的话,没必要用view去做overflow,scroll-view提供了更为强大的功能,通过参数的调整,你可以控制
腾讯ISUX
2018/06/29
1.5K0
推荐阅读
相关推荐
微信小程序布局单位的使用
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文