In above example, I have tried switch box style and i have tried in em value,when i have written font size 16px based on their parents ,according veiwport there will be changes in font size while changing switch box circle is not perfect ,For particular font size is suitable (eg:parent font-size 20px,22px)
Here is the code
.parent {
font-size: 16px;
text-align: center;
margin-top: 10px
}
.BP_swtchbox {
display: inline-block;
font-size: 1em
}
.BP_Swtch {
cursor: pointer;
background: #d7d9dd;
border-radius: 0.313em;
height: 0.625em;
width: 1.500em;
display: inline-block;
position: relative;
transition: .4s;
-ms-transition: .4s;
-moz-transition: .4s;
-webkit-transition: .4s
}
.BP_swtchbox input {
display: none
}
.BP_Swtbx_lb {
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 4px 0 #777;
height: 0.875em;
width: 0.875em;
position: absolute;
top: 0;
left: 0;
transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
-ms-transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
-moz-transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
-webkit-transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
bottom: 0;
margin: auto
}
.BP_swtchbox input:checked+.BP_Swtch {
box-shadow: 0 0 0 0.375em #58b14c inset
}
.BP_swtchbox input:checked+.BP_Swtch .BP_Swtbx_lb {
left: calc(100% - 0.875em);
left: -ms-calc(100% - 0.875em);
left: -moz-calc(100% - 0.875em);
left: -webkit-calc(100% - 0.875em)
}<div class="parent">
<label class="BP_swtchbox" for="BPSwitch">
<input type="checkbox" id="BPSwitch" class="hide">
<label class="BP_Swtch" for="BPSwitch">
<span class="BP_Swtbx_lb"></span>
</label>
</label>
</div>Here is the screenshot for font size of 20px for parent class.....for switch icon
What to do for that....