智软工作室主要是为宁波公司提供宁波网站建设,宁波网站制作,宁波做网站公司,宁波外贸网站建设公司,宁波网站优化等项目,以优质的服务,优惠的价格,深的客户信赖。相信有你的加入我们的明天会更有动力!期待与你合作!
  • 宁波智软设计工作室,打造宁波网站制作工作室顶级品牌
  • 智软拥有专业的设计团队
  • 多年网站建设团队为你服务
  • 智软期待与你合作
  • 我们的技能
  • 我们掌握的技能有:dreamweaver,flash,photoshop
  • 宁波高端网站建设服务公司
    2014已经悄然到来,在新的一年我们恭贺所有客户事业蒸蒸日上,同事庆祝智软设计工作室成立5周年,在5周年为众多客户提供了保质量的网站设计与网站制作。 我们在新的一年质量与服务将会更加进一步为更多的客户带来高端的网站设计与服务!期待与你合作
  • 企业网站制作建设原因与服务介绍

    智软设计工作室多年为宁波企业网站制作建设服务一直以来我们以最优惠价格,最优质的质量,最突出的设计!得到了客户的一致认可,我们的服务包括:宁波网站设计,宁波网站建设,宁波网站制作,宁波网站优化,宁波英文网站制作我们会以优质的服务,最低的价格来报答客户!

  • 点击链接网站优化推广介绍

    点击连接网站优化推广-对企业的网站优化和网站推广--对企业的重要性-点击进行详细了解

  • 2014开幕,宁波网站设计服务全面优惠.

    2014开幕,宁波智软设计为宁波企业提供更加优秀的设计和实惠的价格

  • 链接到网站案例展示平台
    智软设计工作为宁波客户网站设计案例展示平台-案例均为定期更新,让新老客户更好的看到我们做的案例,点击查看我们做的网站案例吧!
  • 我们宁波网络公司提供网站一站式解决方案
    智软(宁波网络公司)帮你轻松解决网络问题,网站一站式解决方案
你当前的位置:首页>>营销与网络

css字体自适应屏幕设置,CSS中字体响应式的设置

2022-06-20 17:00:54

现在我们在做网站的时候,都按照响应式制作。但是又时候字体怎么设置都屏幕不一样。效果感觉有点不太一样。今天就来研究一下响应式字体是怎么实现了。


看了一些资料。想要响应式主要是字体设置单位不一样,单位主要如下:


1vw = viewport宽度的1%

1vh = viewport高度的1%

1vmin = 1vw或者1vh中较小的值

1vmax = 1vw或者1vh中较大的值


CSS中几种不同单位之间的比较

px:像素(Pixel)。相对长度单位,所占大小由屏幕分辨率决定。

em:相对长度单位。相当于当前对象内文本的字体尺寸,如果当前对行内文本的字体尺寸未被认为设置,则相对于浏览器的默认字体尺寸。em的值并不是固定的,它会继承父级元素的字体大小。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

rem:CSS3新增的一个相对单位。与em的主要区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

pt:印刷业上常使用的单位,一般用于页面打印排版,即磅的意思。

%:另外我们还可以使用百分比来指定大小,它表示当前字体相对于浏览器默认字体大小的倍数。该单位在页面响应式设计中也被经常用到。

vw/vh/vmin/vmax:上面已经介绍了,表示字体相对于viewport高或宽的大小。


响应式页面还要添加viewport

什么是viewport?

  viewport是HTML5中新加入的一个meta标记,其主要作用是为移动客户端的浏览器进行显示优化。通过设置viewport的属性值,可以控制当前页面默认采用什么样的方式在移动端的浏览器中显示页面。下面是一个常用的针对移动网页优化过的页面的viewport meta标记的设置项:

<meta name="viewport" content="width =device-width, initial-scale=1, maximum-scale=1"/>


更多

【责任编辑:超级管理员】

关键字:

absolute溢出部分不隐藏 父div加入position:absolute就行 阿里云 或者腾讯云 filezilla无法链接 filezilla 错误: 读取目录列表失败解决

最新文章

2021-05-10 09:29

相关文章

2021-05-10 09:29
网站制作咨询:
QQ:277728291
电话:18668277799
邮箱:277728291@qq.com
期待你来电咨询
回顶部
Copyright 2010 智软工作室 版权所有    智软为宁波公司提供最优惠的网络服务【宁波网站建设,宁波网站制作公司,宁波做网站公司,宁波外贸网站建设公司】我们竭诚为你服务!