方法有两种:

一:采用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. freeMarker(七)——程序开发指南之数据模型

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.基本内容 在入门章节中, 我们已经知道如何使用基本的Java类(M ...

  2. [POI 2018] Plan Metra

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=5100 [算法] 首先分两类考虑 : 1. 1 -> N的路径不经过其它节点 , ...

  3. mongodb 学习资料

    1 入门 http://www.cnblogs.com/huangxincheng/archive/2012/02/18/2356595.html http://www.cnblogs.com/hoo ...

  4. POJ2513(字典树+图的连通性判断)

    //用map映射TLE,字典树就AC了#include"cstdio" #include"set" using namespace std; ; ;//26个小 ...

  5. hbase->Mapreduce->hbase

    Hbase对Mapreduce API进行了扩展,方便Mapreduce任务读写HTable数据. package taglib.customer; import java.io.IOExceptio ...

  6. win7中配置eclipse连接Ubuntu内的hadoop

    Hadoop java 分布式 云计算 数据库 目录[-] 1.设置Ubuntu静态IP: 1)配置网卡参数到interfaces文件: 2)重启网卡: 2.配置Ubuntu的hosts: 3.配置V ...

  7. hdu1056

    #include <cstdio> void main(){ double length; double l[300]; l[1] = 1.0/2; int i; for (i = 2;; ...

  8. Free Style Structure text

    最近用了很多文本配置输入,考虑一个最简单的格式,适合C语言scanf读写数据. 基本数据类型直接使用常用形式. double 直接用小数,对应%f读取. int 直接用十进制整数,对应%d读取. ch ...

  9. LENOVO服务器批量升级BMC固件

    需求:通过服务器远程管理IP批量升级IMM.UEFI固件 工具:asu64.ipmitool.iflash64.cdc_interface.sh 下载:http://pan.baidu.com/s/1 ...

  10. Java Script 学习笔记 -- jQuery

    一 jquery简介 1 jquery是什么  jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototyp ...