写了两天小程序样式,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
|
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
求求你多看看文档吧,我们这新人做小程序都没你这么多毛病
|