灵感来源

https://x5.tencent.com

简单分析

利用@media基于设备宽度，对字体应用不同的css
所以，相应的，css代码直接成倍增长。


// css-less字体动态适配 -- 手机
@media all and (max-width: 768px){.text-for-title {font-size: 1vw!important;border-bottom: 2px solid #6f2d91 !important;}
}
// 平板？
@media all and (min-width: 769px) and (max-width: 1349px){.text-for-title {font-size: 1vw!important;padding: 0.2vw 0 !important;border-bottom: 3px solid #6f2d91 !important;}
}
// pc？
@media all and (min-width: 1350px){.text-for-title {font-size: 1.5em!important;}
}

缺点

会造成全局样式污染, vue的scoped css中使用@media中样式，会影响到全局页面中同名的css样式。

<style scoped lang='less'>
</style>

css @media自适应字体大小--简单试试相关推荐

CSS中的自适应字体大小
本文翻译自:Responsive font size in CSS I've created a site using the Zurb Foundation 3 grid. 我已经使用Zurb Fo ...
手机端自适应字体大小和元素宽度自适应
第一种,媒体查询: @media (min-width:0px){html{font-size:12px;} } @media (min-width: 320px){html{font-size:12 ...
html自动适应屏幕分辨率,css如何自适应屏幕大小？
css如何自适应屏幕大小?下面本篇文章给大家介绍一下使用CSS实现屏幕大小自适应的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何自适应屏幕大小? 要想实现css屏幕 ...
native字体尺寸自适应 react_ios-React Native自适应字体大小
ios-React Native自适应字体大小我想问一下如何处理本机句柄或做响应字体. 例如,在iPhone 4s中,我的fontSize:14,而在iPhone 6中,我的fontSize:18. ...
div怎么在css中设置字体大小,css如何设置div字体大小
css设置div字体大小的方法是,给div字体添加font-size属性,并且设置合适的字体大小即可,例如[div {font-size:200%;}]. 本文操作环境:windows10系统.css ...
html如何固定字号,css怎么控制字体大小？
css怎么控制字体大小?下面本篇文章就来给大家介绍一下在HTML页面中使用CSS控制字体大小的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么控制字体大小? 在CSS ...
html图片自动在div里放大,css图片自适应div大小怎么做
css图片自适应div大小怎么做内容导读:css图片自适应div大小的控制,为了让图片能够更好的展示,建议使用max-width这个属性.不管是pc端还是移动端,或者是自适应网站,使用max-wid ...
div怎么在css中设置字体大小,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
HTML如何设置字号大小和颜色,css如何设置字体大小和颜色？
设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. css如 ...

css @media自适应字体大小--简单试试

灵感来源

简单分析

缺点

css @media自适应字体大小--简单试试相关推荐

最新文章

热门文章