HTML实战-响应式购物界面

ZXT
281 阅读4分钟

Hello! 又到了H5页面开发的时候了。 今天带大家来开发一个响应式的H5页面，下面是页面的演示稿

492413645148192231.jpg

3.1 为什么选择 rem 单位？

在传统的 CSS 中，使用 px（像素）单位来定义元素的尺寸会遇到一个问题：它是一个绝对单位，无法很好地应对不同屏幕的分辨率和缩放。而 rem（root em）单位是相对单位，它的大小是基于根元素（即 <html> 标签）的字体大小计算的。因此，使用 rem 单位可以更好地实现响应式布局，使得页面在不同的屏幕和设备上表现一致。

比如使用px单位在iphone XR跟 iphone 页面布局因为他们的宽度不同会造成巨大的布局差异。

image.png image.png 我们使用rem就能解决这个问题。可以用js获取视口宽度，接着动态的设置HTML的**字体大小**(的大小是基于根元素（即 `` 标签）的字体大小计算的)

不过此时我们还发现了一点小问题，怎么中间有丢丢空格？ 当你把两个元素设置为 inline-block 时，元素会表现得像行内元素（inline），但又具有块级元素的特性（例如可以设置宽度和高度）。然而，使用 inline-block 时，两个元素之间会有一个默认的空白间隙。这是因为在 HTML 中，inline-block 元素之间存在空格、换行符或者其他不可见字符，浏览器会把这些字符当作空白渲染，从而导致它们之间的间隙。我们将问题解决方案放在文章的末尾，不影响文章阅读。

通过js动态设置HTML的字体大小

<script>
    //阻塞 来动态设置 html font-size
    function calc(){
        const w = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = w / 10 + 'px';//这样在设置rem时10rem既是占满屏幕。
        console.log(w);
    }  
    calc();

    window.onresize = function(){//当视窗发生变化时
        calc();
    }
</script>

设备适应问题解决，我们继续。在之前的教学中已经讲过了，我们应该先写结构，再写样式。 可以看到整体是一个上下分栏的界面，上边是一张置顶图片，下边则是我们的物品栏。物品栏的多个东西可以看成一个列表项。至此，我们可以很轻松的写出结构。我们使用BEM命名规范来写

<body>
    <div class="page">
        <div class="page__hd">
                <img src="" alt="">
        </div>
        <div class="page__bd">
            <div class="good-list">
                <div class="good-list__bd">
                    <ul>
                        <li class="good-item">
                            <div class="good-item__bd">
                                <img src="" alt="">
                                <div class="flag-tittle">
                                    <a href="">夏季长袖女款好看</a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>

接着我们来写css样式。先来重置下页面的样式

      * {
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            background-color: rgb(222, 255, 192);
        }
        ul li{
            list-style: none;
        }

其他样式

.page__hd img{
            width: 100%;
        }
        .page__bd{
            padding: 0.13333rem;
        }
        .good-item{

        }
        .good-item img{
            display: inline-block;
            width: 2.34666rem;
            height: 2.34666rem;
        }
        .flag-tittle{
            display: inline-block;
            height: 100%;
            color: #000;
            text-decoration: none;
            vertical-align: top;
        }
        .flag-tittle a{
            color: #000;
            text-decoration: none;

        }

中间空白符解决方法

  1. 删除 HTML 中的空格或换行符

    如果你在两个 inline-block 元素之间存在空格或者换行符（如在 <div class="box">111</div> 和 <div class="box">222</div> 之间），浏览器会渲染这个空白。因此，删除 HTML 中的空格或换行符可以解决问题。

    <body>
  <div class="box">111</div><div class="box">222</div>
</body>

    这种方式简单有效，但代码不太易读。

  2. 通过 CSS 去掉间隙

    你可以通过调整 font-size 或者设置 font-size: 0 来去掉 inline-block 元素之间的间隙。

    body {
  font-size: 0; /* 去除所有空格 */
}

.box {
  font-size: 16px; /* 恢复文字大小 */
}

    这样，inline-block 元素之间的间隙就会消失。

  3. 使用负边距（margin）

    你也可以使用负边距来消除间隙。通过给 inline-block 元素的右边添加负边距，来去掉它们之间的间隔。

    .box {
  margin-right: -4px; /* 根据需要调整负边距 */
}

  4. 利用 flexbox 代替 inline-block

    如果你使用的是 inline-block 来布局，考虑使用 flexbox 来代替。这不仅可以消除间隙问题，而且还会提供更多的灵活性。

    body {
  display: flex;
}

.box {
  margin-right: 0; /* 默认没有间隙 */
}

    使用 flexbox 布局时，元素会自然排列，不会有空白间隙问题。

    我们使用设置body的字体为0来解决，这时候当我们设置了一个方块的字体时，问题又出现了。

image.png

怎么两个格子不一样高？？？ 经过查询发现这是一个基线对齐的原因,大家发现没有对齐的方式是111和222的底部在同一条直线？这就是默认的元素对齐方式：基线对齐。

  • vertical-align: top;：这行代码将选中元素的垂直对齐方式设置为顶部对齐。在CSS中，vertical-align属性用于指定元素在垂直方向上的对齐方式，可以设置为top（顶部对齐）、middle（居中对齐）、bottom（底部对齐）、baseline（基线对齐）等。

在你提供的代码上下文中，这段样式可能是用于设置某个元素（如图片、文本或其他内联元素）在其父元素中的垂直对齐方式。例如，如果一个图片需要与上方的文本顶部对齐，你可以将vertical-align: top;应用于该图片的CSS样式中。

avatar
文章
阅读
粉丝