网站建设方案免费下载,在哪个网站做民营企业申报,电脑版cad免费怎么下载,it外包费用今天在某个群里面闲逛#xff0c;看见一个童鞋分享了一个携程的移动端的页面。地址这里我也分享下吧#xff1a;http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标#xff0c;用的比较多就是用字体图标来代替#xff0c;有些图标不多的时候就自己单个的切出来… 今天在某个群里面闲逛看见一个童鞋分享了一个携程的移动端的页面。地址这里我也分享下吧http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标用的比较多就是用字体图标来代替有些图标不多的时候就自己单个的切出来控制了。 看了下携程的手机端的网站这些图标是用了雪碧图来合并的因为一直以来手机端的屏幕大小不一所以通常都会把设计图等比例缩放的形式展现百分比的方式来布局达到自适应。 下面我们就来说说这个携程手机端的案例吧 首先这个雪碧图的原理与PC端的是一样的只不过手机端的要按比例缩放一下。 首先是合并的雪碧图 大家发现没有雪碧图的尺寸与原图刚好缩放了2倍。 再个就是原始 宽度和高度以及图标的坐标位置。很明显通常元素的宽度和高度也就是要显示的图标的宽度和高度这里也要缩放2倍。 下面的图就是其中某个显示图标元素包括宽度、高度和左边值刚好都是缩放过2倍的所以看到这里都明白了吧手机端的雪碧图就是这么做的也挺简单的吧比PC端就是多了一步缩放的计算哈哈。 转载于:https://www.cnblogs.com/kt520/p/5681540.html
