这是一个创建于 2270 天前的主题，其中的信息可能已经有所发展或是发生改变。
写了两天小程序样式，wxss 快毁了我 css 的三观，是我的能力问题，还是 wxss 真的很奇葩？
 |
1
FakeLeung 2018-09-05 09:20:12 +08:00
除了 pt 还有各种限制，其他和 css 无异。
|
 |
2
Flicker 2018-09-05 09:21:58 +08:00
比如哪些地方奇葩？
|
 |
4
jtsai OP ```
<!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 2018-09-05 09:44:15 +08:00
稍微会写点小程序的人
批评你 学艺不精 可否接受 |
|
6
jtsai OP ```
// 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 容器是性质不会继承到下面的属性，这只是很影响布局的一点，对我来说整个就乱了，还有很多其他非常奇怪的，没空列 ``` |
 |
8
qiayue 2018-09-05 09:46:17 +08:00
大部分网页，把里边的 span 都换成 text，div、ul、li 等都换成 view，再把 css 里的 px 换成 rpx，就可以直接起效果了
|
 |
9
learnshare 2018-09-05 09:46:30 +08:00
写什么小程序...
|
|
10
qiayue 2018-09-05 09:47:26 +08:00
.container div
这是回帖的时候写错了，还是你代码里本身写错了？ |
 |
11
paloalto 2018-09-05 09:48:00 +08:00 via iPhone
哈？.container div ？？哪里来的 div ？
麻烦给 container 里面的 view 加个 class 吧，或者 .container view 这么写。 |
|
12
jtsai OP ```
<!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; } // 乱七八糟显示 // 所有我根本不明白它有容器这个概念吗 ``` |
|
14
paloalto 2018-09-05 09:49:40 +08:00 via iPhone
还有，wxss 要用 /*xxx*/ 注释。
|
|
15
belin520 2018-09-05 09:50:30 +08:00
楼主应该是遇到了 position: fixed; 在移动端的显示差异问题吧？你这个样式试一下在 iOS 微信浏览器是否可正常显示
布局的建议你使用 flex 进行布局 |
|
17
paloalto 2018-09-05 09:50:50 +08:00 via iPhone
啊，不好意思，我是盲人。
请改成这样试一下吧： .container view { width: 25%; float: left; flex-direction: row; } |
 |
19
newbieRenew 2018-09-05 09:51:56 +08:00  2
标题应该改为 ： 五大三粗，不细心，怎么做开发
|
|
21
paloalto 2018-09-05 09:52:51 +08:00 via iPhone
欧 知道了，不是写法问题，是 css 布局问题。
|
|
22
belin520 2018-09-05 09:54:16 +08:00
还有就是每个浏览器的对于 DOM 的初始化样式都是有差异的（假设把小程序的 webview 当做一个浏览器）
按照官方写法，小程序的 wxss 除了引入了一个 pt 单位，并没有其他显著的 [语法差异] ，但是并不会保证完整的旋绕一致性，这个需要你去根据实际的情况去调整 |
|
25
qiayue 2018-09-05 10:02:50 +08:00
app.wxss 里边有 .container 的默认样式，你这里也用同样的 class 会受影响
|
|
27
qiayue 2018-09-05 10:05:30 +08:00
你看，改一个 clsss 就可以了
 |
 |
32
xinple 2018-09-05 10:08:48 +08:00
能力问题吧。html、css 功底还不够扎实。
|
 |
33
Hayek 2018-09-05 10:16:02 +08:00
|
|
34
jtsai OP @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 2018-09-05 10:27:58 +08:00 1
都跟你说了 app.wxss 里边也有一个 class 叫做 container ,我 27 楼还给你贴图片了
你把你这里的 container 换一个名字就可以了 |
|
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 |
|
37
xinple 2018-09-05 10:50:03 +08:00
 |
|
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; } |
|
39
Hayek 2018-09-05 11:14:25 +08:00
@jtsai 我亲自试验了一下，container 这个 class 可能在 app.wxss 里面定义过了，我改了 class 就可以正常显示了，证明 27 楼的方法确实有效。
大家并不是来撕逼的，希望谦虚一些，细心一点，审查元素的时候看看里面的 css 到底是什么样子的。 这样你的三观就不会这么容易被毁了。 |
 |
40
34C 2018-09-05 12:17:18 +08:00 via iPhone
玻璃心到这个程度…… 还是少上网吧
|
 |
41
suzic 2018-09-05 14:37:13 +08:00
background-img 不支持，我也是惊了
|
 |
42
licoycn 2018-09-05 15:05:34 +08:00
和 css 差不多啊，我都是使用 wepy+less 来进行预编译开发的，楼主要学会沉淀
|
 |
43
fetich 2018-09-05 16:27:42 +08:00
这不是撕，行或不行，实打实的，没有个人主观意念在里面
|
 |
45
asadegg 2018-09-06 08:36:22 +08:00
求求你多看看文档吧，我们这新人做小程序都没你这么多毛病
|
Select Language