小程序 wxss 样式毁三观

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2057 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

wxss

三观

样式

CSS

45 条回复

FakeLeung

2018-09-05 09:20:12 +08:00

除了 pt 还有各种限制，其他和 css 无异。

Flicker

2018-09-05 09:21:58 +08:00

比如哪些地方奇葩？

jtsai

2018-09-05 09:41:20 +08:00

@Flicker 比如说，容器的概念，就很奇葩，现在不能追加内容了吗

jtsai

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

2018-09-05 09:44:15 +08:00

稍微会写点小程序的人
批评你学艺不精
可否接受

jtsai

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

2018-09-05 09:45:09 +08:00

@belin520 可以接受，麻烦你解惑我这个容器问题

qiayue

2018-09-05 09:46:17 +08:00

大部分网页，把里边的 span 都换成 text，div、ul、li 等都换成 view，再把 css 里的 px 换成 rpx，就可以直接起效果了

learnshare

2018-09-05 09:46:30 +08:00

写什么小程序...

qiayue

2018-09-05 09:47:26 +08:00

.container div
这是回帖的时候写错了，还是你代码里本身写错了？

paloalto

2018-09-05 09:48:00 +08:00 via iPhone

哈？.container div ？？哪里来的 div ？
麻烦给 container 里面的 view 加个 class 吧，或者 .container view 这么写。

jtsai

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; 
}
.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

2018-09-05 09:49:39 +08:00

@paloalto 麻烦你看清楚在回复

paloalto

2018-09-05 09:49:40 +08:00 via iPhone

还有，wxss 要用 /*xxx*/ 注释。

belin520

2018-09-05 09:50:30 +08:00

楼主应该是遇到了 position: fixed; 在移动端的显示差异问题吧？你这个样式试一下在 iOS 微信浏览器是否可正常显示

布局的建议你使用 flex 进行布局

jtsai

2018-09-05 09:50:40 +08:00

@qiayue .container div 的写法是对的。

paloalto

2018-09-05 09:50:50 +08:00 via iPhone

啊，不好意思，我是盲人。

请改成这样试一下吧：
.container view {
width: 25%;
float: left;
flex-direction: row;
}

jtsai

2018-09-05 09:51:10 +08:00

@belin520 就知道会说，我第二个例子改成 flex 了

newbieRenew

2018-09-05 09:51:56 +08:00

标题应该改为：五大三粗，不细心，怎么做开发

qiayue

2018-09-05 09:52:24 +08:00

@jtsai 小程序里 .container div 怎么就正确了

paloalto

2018-09-05 09:52:51 +08:00 via iPhone

欧知道了，不是写法问题，是 css 布局问题。

belin520

2018-09-05 09:54:16 +08:00

还有就是每个浏览器的对于 DOM 的初始化样式都是有差异的（假设把小程序的 webview 当做一个浏览器）

按照官方写法，小程序的 wxss 除了引入了一个 pt 单位，并没有其他显著的 [语法差异] ，但是并不会保证完整的旋绕一致性，这个需要你去根据实际的情况去调整

jtsai

2018-09-05 09:54:36 +08:00

@qiayue 复制错了

belin520

2018-09-05 09:55:14 +08:00

@jtsai #18 ？？？？黑人问号

不好意思，前面的回复无礼了，请接受我的道歉，请忽略我最后一条的回复
打扰打扰

qiayue

2018-09-05 10:02:50 +08:00

app.wxss 里边有 .container 的默认样式，你这里也用同样的 class 会受影响

jtsai

2018-09-05 10:05:03 +08:00

@qiayue 嗯，感谢，上面的两个代码我都复制错了，我下层了，有空在写个总结，撕下去我一天没了。

qiayue

2018-09-05 10:05:30 +08:00

你看，改一个 clsss 就可以了

qiayue

2018-09-05 10:06:41 +08:00

@jtsai 另外，这不是撕，所有回复你的人，都是在帮助你找出问题所在，帮助你解决问题

jtsai

2018-09-05 10:06:52 +08:00

@qiayue 我有办法改对，只是它很多概念很奇怪。

qiayue

2018-09-05 10:07:43 +08:00

@jtsai 所有你认为的奇怪，其实都是没学到家

jtsai

2018-09-05 10:08:47 +08:00

@qiayue 可能是，但是两天下来我能列出很多在浏览器显示正常的，但是在小程序显示不正常的

xinple

2018-09-05 10:08:48 +08:00

能力问题吧。html、css 功底还不够扎实。

Hayek

2018-09-05 10:16:02 +08:00

@belin520 只是说一句学艺不精，并没有无理，而且你说的也不错。

@qiayue .container div 这个代码贴出来，确实有问题。我感觉楼主心很累，觉得每个人都在撕他，大家都在帮忙找问题，成了“撕下去一天都没了”。。。其实 v 站讨论技术问题的氛围我觉得很不错了。

jtsai

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

2018-09-05 10:27:58 +08:00

都跟你说了 app.wxss 里边也有一个 class 叫做 container ,我 27 楼还给你贴图片了
你把你这里的 container 换一个名字就可以了

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

2018-09-05 10:50:03 +08:00

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

2018-09-05 11:14:25 +08:00

@jtsai 我亲自试验了一下，container 这个 class 可能在 app.wxss 里面定义过了，我改了 class 就可以正常显示了，证明 27 楼的方法确实有效。
大家并不是来撕逼的，希望谦虚一些，细心一点，审查元素的时候看看里面的 css 到底是什么样子的。
这样你的三观就不会这么容易被毁了。