小程序 wxss 样式毁三观

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 到底是什么样子的。
这样你的三观就不会这么容易被毁了。

34C

2018-09-05 12:17:18 +08:00

玻璃心到这个程度…… 还是少上网吧

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

https://tanronggui.xyz/t/486238