方法有两种:

一:采用css的zoom属性

zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状。

二:采用css3的transform:scale属性

zoom缩放会将元素保持在中间,不会改变元素原来的形状,但是可能会有稍稍的模糊。

整体来说zoom属性与transform:scale属性主要存在如下几点差异

1、zoom的缩放是相对于左上角的;而scale默认是居中缩放;
2、zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;
3、zoom和scale对元素的渲染计算方法可能有差异(需要自己动手,用高清图,仔细去看其中的区别)。
4、对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制;而scale就是纯粹的对图形进行比例控制,文字50%原来尺寸。

最后Anne在这里建议大家如果需要在小程序开发中修改单选框和复选框大小最好采用transform:scale属性,因为采用css的zoom属性时,形状被改变的有些明显,体验很不好。

微信小程序-修改单选框和复选框大小的方法的更多相关文章

  1. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  2. 微信小程序之自定义select下拉选项框组件

    知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...

  3. CSS学习笔记三:自定义单选框,复选框,开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  4. 自动化测试-15.selenium单选框与复选框状态判断

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

  5. 2.12 单选框和复选框(radiobox、checkbox)

    2.12 单选框和复选框(radiobox.checkbox) 本篇主要介绍单选框和复选框的操作一.认识单选框和复选框    1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是 ...

  6. Selenium2学习(十五)-- 单选框和复选框(radiobox、checkbox)

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...

  7. HTML--使用单选框、复选框,让用户选择

    在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选.请看 ...

  8. Selenium3+python自动化 单选框和复选框

    一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了,可以先抽他了. 二.radio和 ...

  9. radio(单选框)/checkbox(复选框) 美化

    由于某种原因,可能需要对单选框(radio)或复选框(checkbox)进行美化,那么直接修改样式是行不通,要实现就需要添加js,以下js依赖于jquery radio.js: function ra ...

随机推荐

  1. C语言小程序(五)、数组查询

    随机产生一些字符,然后输入要查找的字符,本想将查找到的字符存储起来,要么初始化一个等大小的数组,要么要先检索出总共查找到多少个元素,再开辟空间存储,但这样相当于搜索了两遍,没有想到更好的方法,只是简单 ...

  2. 音频压缩(Speex使用&Opus简介)--转

    博客地址:http://blog.csdn.net/kevindgk GitHub地址:https://github.com/KevinDGK/MyAudioDemo 一简介 二局域网语音配置 三Sp ...

  3. 利用stomp.js实现websocket功能,接收ActiveMQ消息队列

    一.ActiveMQ消息发送端 package lixj; import java.util.Date; import javax.jms.Connection; import javax.jms.C ...

  4. poj 1845 Sumdiv(约数和,乘法逆元)

    题目: 求AB的正约数之和. 输入: A,B(0<=A,B<=5*107) 输出: 一个整数,AB的正约数之和 mod 9901. 思路: 根据正整数唯一分解定理,若一个正整数表示为:A= ...

  5. ACM学习历程—Hihocoder [Offer收割]编程练习赛1

    比赛链接:http://hihocoder.com/contest/hihointerview3/problem/1 大概有一个月没怎么打算法了.这一场的前一场BC,也打的不是很好.本来Div1的A和 ...

  6. 洛谷【P2005】A/B Problem II

    题目传送门:https://www.luogu.org/problemnew/show/P2005 高精除低精:https://www.cnblogs.com/AKMer/p/9724556.html ...

  7. bzoj 1941 Hide and Seek —— K-D树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1941 曼哈顿最小距离估价:max( 0, t[x].mn[i] - v.p[i] ) + m ...

  8. vue 给嵌套的iframe子页面传数据 postMessage

    Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...

  9. ES6学习之数值扩展

    二进制和八进制表示法(二进制用前缀0b(或0B)表示,八进制用前缀0o(或0O)表示) Number('0b111') Number('0o10') Number.isFinite()(判断一个值是否 ...

  10. GIT URI

    https://u3shadow@code.google.com/p/myandorid/