Space between div 也适用于移动设备

Question

假设我有类似的东西：

<div class="features small">
    <div class="content-inner">
        <h1>Lorem Ipsum</h1>
        <div class="feature-items">
            <div class="feature">
                <img style="" src="icon1.png" />
                <div class="title">
                    <h4>Title 1</h4>
                </div>
            </div>
            <div class="feature">
                <img style="" src="icon2.png" />
                <div class="title">
                    <h4>Title 2</h4>
                </div>
            </div>
            <div class="feature">
                <img style="" src="icon3.png" />
                <div class="title">
                    <h4>Title 3</h4>
                </div>
            </div>
            <div class="feature">
                <img style="" src="icon4.png" />
                <div class="title">
                    <h4>Title 4</h4>
                </div>
            </div>
        </div>
    </div>
</div>

我如何在移动设备上也能正常工作的每个 "feature" div 之间设置一些 space？现在我正在 CSS:

尝试这个

.feature { padding-right: 4rem; }

但对于移动设备，我必须使用媒体查询。如果我不想使用媒体？

Answer 1

我建议只在桌面断点处应用填充，而不是在桌面设置样式然后覆盖移动设备。这是级联中的反模式。

所以我会这样做：

@media screen (min-width: 64em) {
    .feature { padding-right: 4rem; } 
}

除非您正在使用 js 更改样式，否则我根本不知道有什么方法可以完全不使用媒体查询 - 这对于您尝试做的事情来说似乎有点矫枉过正。我在这篇短文中写了一些关于移动优先 css 模式的内容 post:

http://mrmrs.io/writing/2014/08/18/mobile-first-css/

Space between div 也适用于移动设备

Space between div that works on mobile too

css

media

alignment