uni-app CSS 样式布局错乱 All In One
<h1 id="uni-app-css-样式布局错乱-all-in-one">uni-app CSS 样式布局错乱 All In One</h1><blockquote>
<p>uni-app 写的 H5 页面在内置的 webview 模式下调试正常, 但是在 ios 模拟器上调试样式错乱, 不一致</p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/740516/202107/740516-20210726100953467-943422922.png" alt="" loading="lazy"></p>
<h2 id="运行到内置浏览器">运行到内置浏览器</h2>
<blockquote>
<p>webview 可以调试 css ✅</p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/740516/202107/740516-20210726101131785-276242270.png" alt="" loading="lazy"></p>
<h2 id="运行到手机或模拟器">运行到手机或模拟器</h2>
<blockquote>
<p>不可以调试 css, 只支持 nvue 原生调试 ❌</p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/740516/202107/740516-20210726100907994-1441345172.png" alt="" loading="lazy"></p>
<h2 id="docs-">docs ✅</h2>
<p><img src="https://img2020.cnblogs.com/blog/740516/202107/740516-20210726104141005-148063023.png" alt="" loading="lazy"></p>
<p>https://uniapp.dcloud.io/matter?id=h5正常但app异常的可能性</p>
<h2 id="solutions-">solutions ？？？</h2>
<p>https://ask.dcloud.net.cn/question/68375</p>
<p>App 平台样式错乱，注意使用的 css 的兼容性，可能是使用了低版本安卓不支持的 css。</p>
<p>参考指南：https://uniapp.dcloud.io/matter</p>
<p>💩 首先应自己在真机运行或微信开发工具上调整样式，切勿在H5版开发后直接打包！</p>
<blockquote>
<p>原因找到了, uni-app 里面不能用 CSS 伪类 ???</p>
</blockquote>
<blockquote>
<p>原因找到了，不能使用字体图标组件 ??? icon-fonts / emoji ???</p>
</blockquote>
<blockquote>
<p>vue 里只有行内样式有效，标签里的样式和引入的样式都失效 ???</p>
</blockquote>
<h2 id="solution">solution</h2>
<blockquote>
<p>scss scoped ❌ bug</p>
</blockquote>
<p>父组件的 css 样式没有加 scoped， 导致子组件继承了与父组件同名的 class 样式 bug;</p>
<pre><code class="language-md"><style lang="scss">
.content {
display: flex;
flex-direction: column;
flex: 1;
margin-bottom: 50px;
background-color: #f0f0f2;
/* height: 100vh;
height: 768px; */
}
</style>
</code></pre>
<pre><code class="language-md">
<style scoped lang="scss">
.data-block-card-container {
width: 100%;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
justify-content: center;
margin: 10px;
padding: 20px;
background: #fff;
border-radius: 2px;
.title {
/* font-size: 14rpx; */
font-size: 14px;
/* font-size: 1rem; */
margin-bottom: 8px;
}
.time {
font-size: 12px;
line-height: 20px;
margin-bottom: 20px;
.item {
display: inline-block;
}
.separate {
margin: 0 5px;
}
}
.content {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: center;
// height: 66px;
background: #fff;
.left {
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
justify-content: space-between;
width: 100px;
.date {
margin-bottom: 12px;
}
.all {
font-size: 24px;
line-height: 32px;
}
}
.right {
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
justify-content: center;
width: 70px;
height: 100%;
// height: 66px;
border-left: 1px dashed #999;
padding-left: 10px;
.item {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: center;
margin-top: 5px;
margin-bottom: 12px;
.key {
display: inline-block;
margin-right: 10px;
}
.text {
display: inline-block;
}
}
}
}
.ratio {
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: center;
margin-top: 12px;
.item {
margin-right: 10px;
.value {
position: relative;
/* text-indent: 10px; */
padding-left: 20px;
// ::before {
// position: absolute;
// top: -3px;
// left: 0px;
// display: inline-block;
// /* width: 10px;
// height: 10px; */
// // content: "✅";
// content: "⬆";
// /* content: "⬇"; */
// }
}
}
}
}
</style>
</code></pre>
<h2 id="x5-内核">X5 内核</h2>
<p>腾讯 TBS x5 内核仅支持 Android 平台；iOS 只能使用自带的 WKWebview</p>
<p><img src="https://img2020.cnblogs.com/blog/740516/202107/740516-20210726102918973-1017714614.png" alt="" loading="lazy"></p>
<p>https://ask.dcloud.net.cn/article/36806</p>
<h2 id="refs">refs</h2>
<blockquote>
<p>uni-app & uCharts 踩坑</p>
</blockquote>
<p>https://www.cnblogs.com/xgqfrms/p/15020087.html</p>
<hr>
<div>
</div>
<hr>
<blockquote style="display: flex; flex-flow: column; align-items: center; justify-content: center; text-align: center; border: none">
<h3><strong><span style="font-size: 16pt; color: rgba(0, 255, 0, 1)">©xgqfrms 2012-<span data-uid="copyright-aside">2020</span></span></strong>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！</strong></span></p>
<p><span style="font-size: 18pt; color: rgba(0, 255, 0, 1)"><strong>原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！</strong></span></p>
</h3></blockquote>
<hr>
</div>
<div id="MySignature" role="contentinfo">
<div style="display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;">
<p>本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/15060188.html</p>
<p style="color: red; font-size: 23px; margin-top: 5px; margin-botom: 5px;">未经授权禁止转载，违者必究！</P>
</div>
<hr/><br><br>
来源：https://www.cnblogs.com/xgqfrms/p/15060188.html
頁:
[1]