小程序 wxss 样式毁三观

2018-09-05 09:15:52 +08:00
 jtsai

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

6132 次点击
所在节点    问与答
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
哈？.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; <!-- 上面换成 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
还有，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
啊，不好意思，我是盲人。

请改成这样试一下吧：
.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 怎么就正确了

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/486238

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX