php input字体大小最小是多少,移动端最佳字体大小设置

诶，告诉大家一些移动端css单位该怎么用。px肯定是不行的，手机有那么多的尺寸，要写多少@media。最常用的有两个单位：

1、rem

rem是相对于根元素的大小设置的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子：

html{

font-size:20px; }

p{

width: 600px;

overflow: hidden;

line-height: 1;

font-size: 1rem; }

是啊啊啊

font-size : 20px;

}

@media only screen and (min-width: 401px){

html {

font-size: 25px !important;

}

}

@media only screen and (min-width: 428px){

html {

font-size: 26.75px !important;

}

}

@media only screen and (min-width: 481px){

html {

font-size: 30px !important;

}

}

@media only screen and (min-width: 569px){

html {

font-size: 35px !important;

}

}

@media only screen and (min-width: 641px){

html {

font-size: 40px !important;

}

}

如果你不设置html的字体大小，就会使用16px作为基数来。这个比px的好处显而易见，你不需要对每个元素就进行一次@media，只需要对html根元素做不同尺寸的设置就可以了，兼容性也很好。

2、vw、vh

rem单位虽然依旧很简单了，但是依旧不够简单粗暴，还有一种更简单的，就是vw、vh单位。

相对于视口的宽度。视口被均分为100单位的vw。比如，1vw就相当于屏幕宽度的1%。直接上例子

p{

width: 20vh;

height: 30vw;

line-height: 1;

font-size: 1vw;

background: #FC8B53;

color: #fff;

}

是啊啊啊

这么设置之后，p的宽度就随着屏幕高度的变化而变化，它的高度就随着屏幕宽度的变化而变化，字体的大小也随着屏幕变化。我这么搞是为了更直观的表示vw这个单位的灵活。再也不用写一堆连七八糟的@media了。

怎么个灵活法呢？比如你设置一个p的宽度是屏幕的50%，那么width就是50vw。这时候，你要设置它的高度是它的宽度的50%，如果不用vw咋办？你只能用js去算。但是用了vw就直接设置成25vw就搞定了。

但是这个有些兼容性的问题，ios是没有问题的，安卓手机自带浏览器要安卓系统4.4以上才行，别的浏览器都是可以的，只有自带的有问题。 不过现在谁还用安卓自带的浏览器去耍呢，在哪儿都找不到。所以，直接用vw、vh吧。