HTML中移动端很好字体大小设置的方法-创新互联

这篇文章主要为大家展示了HTML中移动端很好字体大小设置的方法,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“HTML中移动端很好字体大小设置的方法”这篇文章吧。

创新互联专注于古浪网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供古浪营销型网站建设,古浪网站制作、古浪网页设计、古浪网站官网定制、小程序定制开发服务,打造古浪网络公司原创品牌,更为您提供古浪网站排名全网营销落地服务。

html是什么

html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。

移动端css单位该怎么用。px肯定是不行的,手机有那么多的尺寸,要写多少@media。最常用的有两个单位:
1、rem


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



    
    
    
        
html{            
font-size:20px;        }        
p{            
width: 600px;            
overflow: hidden;            
line-height: 1;            
font-size: 1rem;        }    
        

        是啊啊啊    

当你在html根元素设置 font-size:20px;的时候,1rem = 20px;同理,如果设置10px,那么1 rem = 10px;rem不只是可以用于字体大小,也就可用于width等长度单位。这时你会问,这样怎么做到响应式呢?所以就要结合@media来设置html根元素的大小,这样页面里所有对应的rem单位就会跟着根元素走,例如:

  • html {
        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吧。

以上就是关于“HTML中移动端很好字体大小设置的方法”的内容,如果改文章对你有所帮助并觉得写得不错,劳请分享给你的好友一起学习新知识,若想了解更多相关知识内容,请多多关注创新互联行业资讯频道。


本文名称:HTML中移动端很好字体大小设置的方法-创新互联
本文路径:http://scyanting.com/article/dchgdi.html