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

小程序 wxss 样式毁三观

  •  
  •   jtsai · 2018-09-05 09:15:52 +08:00 · 6098 次点击
    这是一个创建于 2248 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    FakeLeung
        1
    FakeLeung  
       2018-09-05 09:20:12 +08:00
    除了 pt 还有各种限制,其他和 css 无异。
    Flicker
        2
    Flicker  
       2018-09-05 09:21:58 +08:00
    比如哪些地方奇葩?
    jtsai
        3
    jtsai  
    OP
       2018-09-05 09:41:20 +08:00
    @Flicker 比如说,容器的概念,就很奇葩,现在不能追加内容了吗
    jtsai
        4
    jtsai  
    OP
       2018-09-05 09:42:17 +08:00
    ```
    <!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>
    ```
    belin520
        5
    belin520  
       2018-09-05 09:44:15 +08:00
    稍微会写点小程序的人
    批评你 学艺不精
    可否接受
    jtsai
        6
    jtsai  
    OP
       2018-09-05 09:44:25 +08:00
    ```
    // 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 容器是性质不会继承到下面的属性,这只是很影响布局的一点,对我来说整个就乱了,还有很多其他非常奇怪的,没空列
    ```
    jtsai
        7
    jtsai  
    OP
       2018-09-05 09:45:09 +08:00
    @belin520 可以接受,麻烦你解惑我这个容器问题
    qiayue
        8
    qiayue  
       2018-09-05 09:46:17 +08:00
    大部分网页,把里边的 span 都换成 text,div、ul、li 等都换成 view,再把 css 里的 px 换成 rpx,就可以直接起效果了
    learnshare
        9
    learnshare  
       2018-09-05 09:46:30 +08:00
    写什么小程序...
    qiayue
        10
    qiayue  
       2018-09-05 09:47:26 +08:00
    .container div
    这是回帖的时候写错了,还是你代码里本身写错了?
    paloalto
        11
    paloalto  
       2018-09-05 09:48:00 +08:00 via iPhone
    哈?.container div ??哪里来的 div ?
    麻烦给 container 里面的 view 加个 class 吧,或者 .container view 这么写。
    jtsai
        12
    jtsai  
    OP
       2018-09-05 09:48:49 +08:00
    ```
    <!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;
    }

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

    布局的建议你使用 flex 进行布局
    jtsai
        16
    jtsai  
    OP
       2018-09-05 09:50:40 +08:00
    @qiayue .container div 的写法是对的。
    paloalto
        17
    paloalto  
       2018-09-05 09:50:50 +08:00 via iPhone
    啊,不好意思,我是盲人。

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

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

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

    @qiayue .container div 这个代码贴出来,确实有问题。我感觉楼主心很累,觉得每个人都在撕他,大家都在帮忙找问题,成了“撕下去一天都没了”。。。其实 v 站讨论技术问题的氛围我觉得很不错了。
    jtsai
        34
    jtsai  
    OP
       2018-09-05 10:24:59 +08:00
    @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 复制对了,你还是不能跟我解释,为什么在浏览器显示就正常,而在小程序显示就不正常
    // 是啊,我就是想上了吐槽一下,讨论来讨论去浪费时间
    ```
    qiayue
        35
    qiayue  
       2018-09-05 10:27:58 +08:00   ❤️ 1
    都跟你说了 app.wxss 里边也有一个 class 叫做 container ,我 27 楼还给你贴图片了
    你把你这里的 container 换一个名字就可以了
    xinple
        36
    xinple  
       2018-09-05 10:28:47 +08:00
    如果是 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
    xinple
        37
    xinple  
       2018-09-05 10:50:03 +08:00
    xinple
        38
    xinple  
       2018-09-05 10:59:37 +08:00
    .container { display: flex; position: fixed; top: 0; left: 0; right: 0; }
    .container view { flex: 1; }
    Hayek
        39
    Hayek  
       2018-09-05 11:14:25 +08:00
    @jtsai 我亲自试验了一下,container 这个 class 可能在 app.wxss 里面定义过了,我改了 class 就可以正常显示了,证明 27 楼的方法确实有效。
    大家并不是来撕逼的,希望谦虚一些,细心一点,审查元素的时候看看里面的 css 到底是什么样子的。
    这样你的三观就不会这么容易被毁了。
    34C
        40
    34C  
       2018-09-05 12:17:18 +08:00 via iPhone
    玻璃心到这个程度…… 还是少上网吧
    suzic
        41
    suzic  
       2018-09-05 14:37:13 +08:00
    background-img 不支持,我也是惊了
    licoycn
        42
    licoycn  
       2018-09-05 15:05:34 +08:00
    和 css 差不多啊,我都是使用 wepy+less 来进行预编译开发的,楼主要学会沉淀
    fetich
        43
    fetich  
       2018-09-05 16:27:42 +08:00
    这不是撕,行或不行,实打实的,没有个人主观意念在里面
    double1
        44
    double1  
       2018-09-05 17:40:30 +08:00
    @suzic 支持的,只是不能用相对路径
    asadegg
        45
    asadegg  
       2018-09-06 08:36:22 +08:00
    求求你多看看文档吧,我们这新人做小程序都没你这么多毛病
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1100 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 22:51 · PVG 06:51 · LAX 15:51 · JFK 18:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.