首页 > 开发 > CSS > 正文

css背景自适应问题

2017-09-12 09:39:41  来源: 网友分享

比如我做一个高度、宽度百分比的按钮,背景用sprite的大图的一部分,用background-size或者其他属性可以做到按钮适应屏幕的大小时,背景图的那一部分也同时适应屏幕大小吗?

解决方案

楼主最好是自己去试一下。

在支持css3较好的浏览器中,要做到在不同尺寸下,同样的图片按比例显示不同的大小。首先要统一单位

  • 单位要统一使用em
  • 按不同的宽度设置不同的字体大小标准
  • 设置background-size 大小,一般与背景图的大小一样。单位em.
  • 设置 background-position

下面是scss的部分代码

以编写手机页为例,设置文字大小

.mainwarp{font-size:12px;}@include min-screen(480px){    .mainwarp{ font-size: 24px; }}@include min-screen(640px){    .mainwarp{ font-size: 32px; }}

设置背景图片

背景图片设置大小,宽高为486px * 389px。在这里使用scss 的自定义方法,转换为em.在这里以最大字体32为基准。

.phone_icon{ background: url(/static/images/common/phone_icon.png) no-repeat; background-size: pxToEm(486,32) pxToEm(389,32); }

具体使用时,位置也是以em为单位设置,pte方法自动转换位置为em单位。

//活动专享.ac_icon_byzx{background: #2cc0da;  .m_icon{background-position: pte(4,32) pte(-136,32);}}//爱国教育.ac_icon_agjy{background: #ff867a;  .m_icon{background-position: pte(-59,32) pte(-132,32);}}//科普学习.ac_icon_kpxx{background: #87bcf7;  .m_icon{background-position: pte(-122,32) pte(-136,32);}}//运动休闲.ac_icon_ydxx{background: #ad7ece;  .m_icon{background-position: pte(-186,32) pte(-136,32);}}