浏览器缩放时自动调整单选按钮大小答案

【问题标题】：Auto-Resize Radio Button when browser zoom浏览器缩放时自动调整单选按钮大小
【发布时间】：2019-02-07 06:09:26
【问题描述】：

我有一个时间选择器，在一个 div 内有两个输入 type="radio"。浏览器缩放时，radioS 不会自动调整大小和 .我怎样才能使用 CSS 自动调整大小？

问题图片：

我的代码是：

<div id="timePeriodSelector" style="font-size: 100%">
<form action="">
<input type="radio" id="timePeriodSelector_default" onclick="Dash.dateTypeSwitcher('default')">Effective Date
<input type="radio" id="timePeriodSelector_secondary" onclick="Dash.dateTypeSwitcher('secondary')">Billing Date
</form>
</div>

【问题讨论】：

作为浏览器缩放，您在谈论 Ctrl + Scroll 功能？为什么需要它？
是的。问题在于 Crtl+ 滚动功能

标签： css radio-button

【解决方案1】：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>   
    #timePeriodSelector{
        border: 1px dotted black;
    }   
  </style>

<body>
    <div id="timePeriodSelector" style="font-size: 100%">
        <form action="">
        <input type="radio" id="timePeriodSelector_default" onclick="Dash.dateTypeSwitcher('default')">Effective Date
        <input type="radio" id="timePeriodSelector_secondary" onclick="Dash.dateTypeSwitcher('secondary')">Billing Date
        </form>
        </div>
</body>
</html>


It is work correctly in chrome

【讨论】：