tz

tz 查看完整档案

上海编辑西安理工大学  |  网络工程 编辑携程旅行网  |  前端开发 编辑 www.zhangweiwei.cn 编辑
编辑

一个热爱前端的页面仔……

个人动态

tz 提出了问题 · 2017-03-07

vw,vh和rem相关的问题

/*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;@lbl*/
@media screen and (max-width:359px) and (min-width:320px) {
    html,body{
        font-size: 50px !important;
    }
}
@media screen and (max-width:374px) and (min-width:360px) {
    html,body{
        font-size: 56.25px !important;
    }
}
@media screen and (max-width:413px) and (min-width:375px) {
   html,body{
        font-size: 58.5px !important;
    }
}
@media screen and (max-width:639px)  and (min-width:414px){
   html,body{
        font-size: 64.6px !important;
    }
}@media screen and (min-width:640px) {
   html,body{
        font-size: 100px !important;
    }
}

这样我把视觉稿上面的大小/100 就可以还原设计稿,但下面这种方案怎么还原设计稿?

html {
    font-size: 16px;
}

@media screen and (min-width: 375px) {
    html {
        /* iPhone6的375px尺寸作为16px基准,414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px往后是每100像素0.5px增加 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
} 

rem适配的时候看到这种解决方案,就是反其道而行,不用js计算。但我有一个疑问,如果是640的设计稿,图片应该怎么处理?设计稿上面的大小/32转化成rem吗?我的理解

关注 3 回答 0

tz 关注了问题 · 2017-01-11

div外层有一圈白色

我写页面时新建的一个div外层有一圈白色,这是怎么回事儿呢?如何去掉这个?

clipboard.pngIE

clipboard.png火狐

clipboard.png谷歌

源代码如下

HTML部分:

<!DOCTYPE html>
<html>

<head>
    <title>滑稽</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style/normalize.css">
    <link rel="stylesheet" href="style/style.css">
</head>

<body>
    <div class="round-face">
        <div class="eyebrow-left"></div>
        <div class="eyebrow-right"></div>
        <div class="eye-left">
            <div class="eyeball-left"></div>
        </div>
        <div class="eye-right">
            <div class="eyeball-right"></div>
        </div>
        <div class="flush-left"></div>
        <div class="flush-right"></div>
        <div class="mouth"></div>
    </div>
</body>

</html>

CSS部分

.round-face {
    display: block;
    width: 200px;
    height: 200px;
    position: relative;
    border-radius: 100px;
    background: radial-gradient(#f7e49b 30%, #f6b74e 99%, #C0C0C0 100%);
    box-shadow: -5px 10px 30px 10px #C0C0C0;
    margin: 20px;
}

目前无论是谷歌浏览器还是IE都出现了这种情况

关注 8 回答 8

tz 回答了问题 · 2017-01-11

div外层有一圈白色

box-shadow: -5px 10px 30px 10px #C0C0C0; 你设置了这个当然啊,直接去掉或者变成内阴影

关注 8 回答 8

tz 关注了问题 · 2016-10-28

解决遮罩层获取,触发事件后,如何触发它下面的元素的事件?

如图clipboard.png
这是一个表单的输入框,它的html如下:
<li>

<div>
    <label>用 &nbsp; 户  &nbsp; 名</label>
    <input type="text" name="u_name" id="u_name" class="w_txt">
    <p class="v_menu">请输入用户名</p>
</div>
<span class="p_txt"></span>

</li>
li中的p标签为一个遮罩层(点击输入框/输入框Onfocus时隐藏,并使输入框为获取焦点状态),获取焦点时如图:

clipboard.png

现在问题来了:因为p标签是定位在input上的遮罩层(z-index较高),当我想点击输入框,获取焦点,开始输入的时候,其实并没有点到输入框(有点绕),我给p标签绑定了click事件,点击就隐藏,可是input标签并没有获取到焦点,效果如图:

clipboard.png
我该怎么样实现点击p标签,遮罩层隐藏,同时对应的输入框获取焦点--感觉就像是直接点击到了ipnut,获取焦点一样一样的(单独的获取输入框焦点,和隐藏遮罩层能实现,两个效果加在一起先后实现就弄不来了),是用事件冒泡?不过这冒泡是嵌套层级关系才适用吧?这同级元素如何冒泡?或者有其他方法?求指教
事件冒泡是无法解决这样的需求的--不是所有的事件都能冒泡,例如:blur、focus、load、unload(看资料找到的)

关注 5 回答 5

tz 回答了问题 · 2016-10-28

解决遮罩层获取,触发事件后,如何触发它下面的元素的事件?

估计老板不懂技术,哈哈

关注 5 回答 5

tz 提出了问题 · 2016-09-26

uc浏览器移动响应问题

(function(doc, win) {
            if (screen && screen.width < 600) {
                document.write('<link rel="stylesheet" href="./css/m-intro.css">');
                document.write('<script type="text/javascript" data-original="./js/hotcss.js"><\/script>');
            }
        })(document, window)

由于pc和移动端有不同的逻辑。所以就采用伪响应,在移动端加载上面的脚本和样式,但是uc浏览器打开还是pc上面的样式,也就是上面的脚本好像没生效,其他浏览器打开加载正常的。有遇到过的同学吗,这是什么原因?

关注 1 回答 0

tz 关注了问题 · 2016-09-13

解决移动端网页把meta的viewport的宽度设置成设计稿的宽度会有问题吗?

<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">

假如设计稿为640,直接将width=640,然后像pc网页制作似的用px当做单位。
我第一见这样的做法,这样做会有什么问题吗?
我平时都是 width=device-width,用rem进行布局,所以很好奇。

关注 7 回答 5

tz 回答了问题 · 2016-09-13

解决移动端网页把meta的viewport的宽度设置成设计稿的宽度会有问题吗?

当然有问题。设计稿的宽度一般都是放大2倍,如果要求不高就缩小一般就行写,兼容的机器多的话建议用rem,对不同的机器动态设置dpr和font-size,然后进行还原设计稿,具体参照淘宝flexbox或网易的解决方案

关注 7 回答 5

tz 关注了问题 · 2016-09-13

解决H5布局问题

原图 整个过程,H5底下的按钮会跳动一下,有什么解决办法嘛?

//已报名的定位样式
footer{
    position: fixed;
    bottom: 0;
    width: 100%;
}
//原因是:页面用scroll写的,我滑动在1.5屏以后刷新页面,footer会先显示在1屏底部,然后再下移到1.5屏位置。

图片描述加载中
图片描述加载到一半
图片描述加载完成

关注 11 回答 9

tz 回答了问题 · 2016-09-13

解决H5布局问题

这个是由于fixed定位在一些机器上产生的bug,可以参照我这个解决方案,代码也在里面。
http://www.zhangweiwei.cn/dem...

关注 11 回答 9

认证与成就

  • 获得 1 次点赞
  • 获得 20 枚徽章 获得 1 枚金徽章, 获得 6 枚银徽章, 获得 13 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-06-14
个人主页被 432 人浏览