zoukankan      html  css  js  c++  java
  • 使用rem单位时css sprites的坑

    在使用rem单位时,用雪碧图(我不喜欢这个名字!)做背景图片在移动端有时会有错位。pc模拟是没有问题的,而且错位的情况不同的手机还不太一样。这里说几个解决的办法。
    出现这个问题的原因我找了很久都找不到,再接着找吧!

    background-size和background-position都用rem

    我实际使用中是用这个方法解决问题的。但是据说这样还是会有错位的时候。

    转换为px

    这个是一定有效的方法。background-size 和 position都用px写死。然后动态增加.zoom{transform:scale(xxx)}样式。把使用到雪碧图的元素用zoom缩放。

    在尝试解决这个问题的时候,我发现background-position的定位方式非常奇怪,顺便也记录在这里。

    px,em单位

    图片的左上角开始计算与容器左上角的距离。

    百分比定位

    如果是m% n%,那么就把图片的(m%,n%)的坐标点,放置在容器的(m%,n%)的位置。

    rem布局代码

     1 (function (doc, win) {
     2     var docEl = doc.documentElement,
     3         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
     4         recalc = function () {
     5             var clientWidth = docEl.clientWidth;
     6             if (!clientWidth) return;
     7             if(clientWidth>=640){
     8                 docEl.style.fontSize = '100px';
     9             }else{
    10                 docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
    11             }
    12         };
    13     if (!doc.addEventListener) return;
    14     win.addEventListener(resizeEvt, recalc, false);
    15     doc.addEventListener('DOMContentLoaded', recalc, false);
    16 })(document, window
  • 相关阅读:
    监听本机tcp和udp的端口
    sysstat-----获取服务器负载历史记录
    inode索引详解
    tcpdump详解
    Windws Server 2008 R2 WEB环境配置之IIS7/IIS7.5+FastCGI+PHP 5.6.4+MYSQL+phpMyAdmin
    echo 命令
    带宽、流量、下载速度之间的换算
    windows 下解决 Time_Wait 和 CLOSE_WAIT 方法
    LNMP环境部署
    关于旅行
  • 原文地址:https://www.cnblogs.com/lymvv/p/8400708.html
Copyright © 2011-2022 走看看