首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
华为云
V2EX  ›  问与答

小程序 wxss 样式毁三观

  •  
  •   jtsai · 48 天前 · 2193 次点击
    这是一个创建于 48 天前的主题,其中的信息可能已经有所发展或是发生改变。

    写了两天小程序样式,wxss 快毁了我 css 的三观,是我的能力问题,还是 wxss 真的很奇葩?

        1
    FakeLeung   48 天前
    除了 pt 还有各种限制,其他和 css 无异。
        2
    Flicker   48 天前
    比如哪些地方奇葩?
        3
    jtsai   48 天前
    @Flicker 比如说,容器的概念,就很奇葩,现在不能追加内容了吗
        4
    jtsai   48 天前
    ```
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <style type="text/css">
    .container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    }
    .container div {
    width: 25%;
    float: left;

    }
    </style>
    <body>

    <p>lala..</p>
    <p>lala..</p>
    <p>lala..</p>
    <p>lala..</p>

    <div class="container"> <!-- 菜单正常的定位到顶部 -->
    <div>首页</div>
    <div>jtsai</div>
    <div>记事本</div>
    <div>时间轴</div>
    </div>

    </body>
    </html>
    ```
        5
    belin520   48 天前
    稍微会写点小程序的人
    批评你 学艺不精
    可否接受
        6
    jtsai   48 天前
    ```
    // wxml
    <view>lala...</view>
    <view>lala...</view>
    <view>lala...</view>
    <view>lala...</view>

    <view class="container">
    <view>1</view>
    <view>2</view>
    <view>3</view>
    <view>4</view>
    </view>

    // wxss
    .container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    }
    .container div {
    width: 25%;
    float: left;
    }


    // 显示乱七八糟
    // container 容器是性质不会继承到下面的属性,这只是很影响布局的一点,对我来说整个就乱了,还有很多其他非常奇怪的,没空列
    ```
        7
    jtsai   48 天前
    @belin520 可以接受,麻烦你解惑我这个容器问题
        8
    qiayue   48 天前
    大部分网页,把里边的 span 都换成 text,div、ul、li 等都换成 view,再把 css 里的 px 换成 rpx,就可以直接起效果了
        9
    learnshare   48 天前
    写什么小程序...
        10
    qiayue   48 天前
    .container div
    这是回帖的时候写错了,还是你代码里本身写错了?
        11
    paloalto   48 天前 via iPhone
    哈?.container div ??哪里来的 div ?
    麻烦给 container 里面的 view 加个 class 吧,或者 .container view 这么写。
        12
    jtsai   48 天前
    ```
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <style type="text/css">
    .container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex; <!-- 上面换成 flex 容器,同样正常显示 -->
    }
    .container div {
    width: 25%;
    flex-direction: row;

    }
    </style>
    <body>

    <p>lala..</p>
    <p>lala..</p>
    <p>lala..</p>
    <p>lala..</p>

    <div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    </div>

    </body>
    </html>


    // 小程序版

    <view>lala...</view>
    <view>lala...</view>
    <view>lala...</view>
    <view>lala...</view>

    <view class="container">
    <view>1</view>
    <view>2</view>
    <view>3</view>
    <view>4</view>
    </view>

    .container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    }
    .container div {
    width: 25%;
    float: left;
    flex-direction: row;
    }

    // 乱七八糟显示
    // 所有我根本不明白它有容器这个概念吗
    ```
        13
    jtsai   48 天前
    @paloalto 麻烦你看清楚在回复
        14
    paloalto   48 天前 via iPhone
    还有,wxss 要用 /*xxx*/ 注释。
        15
    belin520   48 天前
    楼主应该是遇到了 position: fixed; 在移动端的显示差异问题吧?你这个样式试一下在 iOS 微信浏览器是否可正常显示

    布局的建议你使用 flex 进行布局
        16
    jtsai   48 天前
    @qiayue .container div 的写法是对的。
        17
    paloalto   48 天前 via iPhone
    啊,不好意思,我是盲人。

    请改成这样试一下吧:
    .container view {
    width: 25%;
    float: left;
    flex-direction: row;
    }
        18
    jtsai   48 天前
    @belin520 就知道会说,我第二个例子改成 flex 了
        19
    newbieRenew   48 天前   ♥ 2
    标题应该改为 : 五大三粗,不细心,怎么做开发
        20
    qiayue   48 天前
    @jtsai 小程序里 .container div 怎么就正确了
        21
    paloalto   48 天前 via iPhone
    欧 知道了,不是写法问题,是 css 布局问题。
        22
    belin520   48 天前
    还有就是每个浏览器的对于 DOM 的初始化样式都是有差异的(假设把小程序的 webview 当做一个浏览器)

    按照官方写法,小程序的 wxss 除了引入了一个 pt 单位,并没有其他显著的 [语法差异] ,但是并不会保证完整的旋绕一致性,这个需要你去根据实际的情况去调整
        23
    jtsai   48 天前
    @qiayue 复制错了
        24
    belin520   48 天前
    @jtsai #18 ????黑人问号

    不好意思,前面的回复无礼了,请接受我的道歉,请忽略我最后一条的回复
    打扰打扰
        25
    qiayue   48 天前
    app.wxss 里边有 .container 的默认样式,你这里也用同样的 class 会受影响
        26
    jtsai   48 天前
    @qiayue 嗯,感谢,上面的两个代码我都复制错了,我下层了,有空在写个总结,撕下去我一天没了。
        27
    qiayue   48 天前
    你看,改一个 clsss 就可以了
        28
    qiayue   48 天前
    @jtsai 另外,这不是撕,所有回复你的人,都是在帮助你找出问题所在,帮助你解决问题
        29
    jtsai   48 天前
    @qiayue 我有办法改对,只是它很多概念很奇怪。
        30
    qiayue   48 天前
    @jtsai 所有你认为的奇怪,其实都是没学到家
        31
    jtsai   48 天前
    @qiayue 可能是,但是两天下来我能列出很多在浏览器显示正常的,但是在小程序显示不正常的
        32
    xinple   48 天前
    能力问题吧。html、css 功底还不够扎实。
        33
    Hayek   48 天前
    @belin520 只是说一句学艺不精,并没有无理,而且你说的也不错。

    @qiayue .container div 这个代码贴出来,确实有问题。我感觉楼主心很累,觉得每个人都在撕他,大家都在帮忙找问题,成了“撕下去一天都没了”。。。其实 v 站讨论技术问题的氛围我觉得很不错了。
        34
    jtsai   48 天前
    @Hayek
    ```
    // 浏览器
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <style type="text/css">
    .container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    }
    .container div {
    width: 25%;
    float: left;

    }
    </style>
    <body>

    <p>lala..</p>
    <p>lala..</p>
    <p>lala..</p>
    <p>lala..</p>

    <div class="container"> <!-- 菜单正常的定位到顶部 -->
    <div>首页</div>
    <div>jtsai</div>
    <div>记事本</div>
    <div>时间轴</div>
    </div>

    </body>
    </html>

    // 小程序
    // wxml
    <view>lala...</view>
    <view>lala...</view>
    <view>lala...</view>
    <view>lala...</view>

    <view class="container">
    <view>1</view>
    <view>2</view>
    <view>3</view>
    <view>4</view>
    </view>

    // wxss
    .container {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    }
    .container view{
    width: 25%;
    float: left;
    }

    // 可是,就算我把 div 复制对了,你还是不能跟我解释,为什么在浏览器显示就正常,而在小程序显示就不正常
    // 是啊,我就是想上了吐槽一下,讨论来讨论去浪费时间
    ```
        35
    qiayue   48 天前   ♥ 1
    都跟你说了 app.wxss 里边也有一个 class 叫做 container ,我 27 楼还给你贴图片了
    你把你这里的 container 换一个名字就可以了
        36
    xinple   48 天前
    如果是 web,一般都先写 css reset,然后开始写页面 css,时间长了,忘记了 css reset 的存在,会感觉是浏览器默认的。

    刚写小程序时候,会有点不习惯,然后也加上了 reset,立马会感觉舒服很多。

    目前小程序 wxss,除了 wxml 里面不能直接写(只能 style 属性写)有点不方便(比如有一个全局颜色值通过变量传递的情况),除了选择器支持的不全(但目前也足够用),还有一些属性不支持(比如 justify-content: space-evenly;),其他还是和正常些网页 css 没差异。

    加上 rpx 单位很好用,iPhone 6 下面 ok 的话,其他分辨率手机上几乎是等比缩放,小程序还分好了全局 app.wxss 页面 page.wxss 至少我现在都不用 less、sass 了。

    目前我唯一遇到的一个问题,没有特别好的解决方案的,那就是遮罩层里面需要上下滚动的时候,冒泡问题,虽然弹框后可以设置页面 overflow: hidden 或者 catchtouchmove 之后自己模拟 touchmove 但感觉不够完美。

    下面是我小程序里面使用的 reset,目前感觉够用。

    page, view, input, text, form, navigator, rich-text, picker, scroll-view, cover-view, open-data { box-sizing: border-box; }
    rich-text, open-data, form { display: block; }
    del { color: #999; text-decoration: line-through; }
    image { display: block; }
    cover-view { line-height: 1.5; white-space: normal; }
    page { font-size: 28rpx; font-weight: 300; line-height: 1.5; color: #404040; background: #f8f8f8; }

    /* 隐藏默认滚动条 */
    ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
    }

    最后的建议:float 这种几乎不会用到了。可以尽情的使用 flex
        37
    xinple   48 天前
        38
    xinple   48 天前
    .container { display: flex; position: fixed; top: 0; left: 0; right: 0; }
    .container view { flex: 1; }
        39
    Hayek   48 天前
    @jtsai 我亲自试验了一下,container 这个 class 可能在 app.wxss 里面定义过了,我改了 class 就可以正常显示了,证明 27 楼的方法确实有效。
    大家并不是来撕逼的,希望谦虚一些,细心一点,审查元素的时候看看里面的 css 到底是什么样子的。
    这样你的三观就不会这么容易被毁了。
        40
    34C   48 天前 via iPhone
    玻璃心到这个程度…… 还是少上网吧
        41
    suzic   48 天前
    background-img 不支持,我也是惊了
        42
    licoycn   48 天前
    和 css 差不多啊,我都是使用 wepy+less 来进行预编译开发的,楼主要学会沉淀
        43
    fetich   48 天前
    这不是撕,行或不行,实打实的,没有个人主观意念在里面
        44
    double1   48 天前
    @suzic 支持的,只是不能用相对路径
        45
    asadegg   47 天前
    求求你多看看文档吧,我们这新人做小程序都没你这么多毛病
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2082 人在线   最高记录 3762   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 20ms · UTC 14:56 · PVG 22:56 · LAX 07:56 · JFK 10:56
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1