使用Mobile First进行设计时如何编写CSS

“Mobile First”在响应各种环境时易于减轻制造工作量

响应式网页设计（索尼产品信息网站上的示例），在单个页面上同时支持PC和移动设备

在制作网站的“手机版”页面还“PC版”页面还实现了在同一时间一个文件“ 自适应网页设计正在被广泛使用的”。这是因为没有必要为每个观看终端分离HTML文件，因此更新所涉及的工作量很小，并且管理很容易。在这种情况下，您使用自适应网页设计，“ 移动第一谱写的设计方法的CSS（样式表）的想法”，它需要对设计说明的量少，也有变得易于维护的优点。这一次，我将向您展示如何使用这种“移动优先”设计编写CSS。我将解释在不使用框架等的情况下从所有1编写CSS源时的基本编写方式。它是“写怎么CSS，在任何观看环境，如何出现”，因为很容易理解。

写作首先描述一个简单的通用设计，然后是各种设计

（左）分开并描述金额是大量的时间和劳动/（右）一次描述共同的部分

在大多数情况下，“移动设计（窄屏幕）”将比“PC（宽屏幕）设计”更简单。在这种情况下，让我们首先描述所有“移动设计（窄屏幕）”并将其添加到那里并制作“PC（宽屏幕）设计”以减少描述量此外，它成为一个CSS源，需要更少的更新工作。例如，考虑您要准备三种类型（1）智能手机设计，（2）平板电脑设计和（3）PC设计的情况。

共同部分的描述只有一次

此时，首先，将智能手机的设计设计为基础设计（=通用设计）。它在右图中以红色显示。在智能手机上浏览时，只应阅读此红色部分的样式。接下来，我将描述平板电脑的设计，但在这里，我将省略对“智能手机设计”常见部分的描述，并仅描述“为平板电脑添加的设计”。它在右图中以黄色显示。如果在平板电脑上浏览，请阅读红色+黄色样式。最后，我将介绍PC的设计，但在这里，我将跳过“智能手机设计”和“平板电脑设计”常见部分的描述，并仅描述“为PC添加设计”。它在上图中以绿色显示。如果在PC上浏览，您应该阅读红色+黄色+绿色的样式。

如上所述，如果以简单的布局设计和描述简单的“移动版本设计”并在那里添加宽屏幕的设计，则只需要一次描述通用设计，描述量小，更新工作也很容易。※术语“移动优先”主要用于在移动终端上优先使用易用性的意义上。但是，在本文中，我们没有提到设计上的“易用性”。从本质上讲，当采用响应式Web设计时，我将仅描述如何舒适地描述CSS源（=减少描述并使维护更容易）。让我们看看如何使用

使用Media Queries for Mobile First CSS

使用可以将适用条件应用于CSS的媒体查询

为了使用移动优先设计描述CSS源，我们使用称为CSS 3的媒体查询（媒体查询）的描述方法。这是采用响应式Web设计时所需的描述方法。例如，当创建“用于智能手机”，“用于平板电脑”和“用于PC”的三个设计时，设计（CSS源）按以下顺序编写。1.首先，描述智能手机的设计。2.接下来，使用“媒体查询”描述要为平板电脑添加的设计。3.此外，使用媒体查询描述了要为PC添加的设计。在智能手机终端上浏览时，只应读取（1）的设计。在平板终端中，除了（1）之外，还应该阅读（2）的设计。在PC环境中，除了（1）和（2）之外，还应该读取设计（3）。

用移动优先设计描述CSS（样式表）

让我们看看如何编写具体的CSS源代码。

使用媒体查询描述移动第一个CSS

在前面介绍的步骤1到3中编写CSS源时，它将成为以下源。

/ * --------------------------------------------------------------- * // *▼Mobile First（所有环境通用的设计）* // * --------------------------------------------------------------- * /::::::/ * -------------------------------------------------------------- * // *▼设计添加为平板电脑设计* // * -------------------------------------------------------------- * /@media all和（min-width：768px）{::::::}/ * ------------------------------------ * // *▼作为PC设计添加的设计* // * ------------------------------------ * /@media all和（min-width：920px） {::::::}

在上面的例子中，“宽度为768px或更高”的屏幕是平板电脑，“宽度为920px或更高”的屏幕是PC。因为它仅基于屏幕的水平宽度，即使它缩小了浏览器的窗口宽度，它也会显示在平板电脑设计和智能手机的设计中。

使用媒体查询描述移动优先CSS的示例

由于仅通过概述难以理解，作为示例，考虑如下设计网页布局的情况。1.在智能手机等“宽度窄的环境”中，它不是列组成。2.在片剂等“水平宽度小的环境”中，将其分成两层。3.在PC等“宽度宽的环境”中，将其设为3列。*此时，构成每个阶段的块的配色方案在所有环境中都很常见。■ HTML的配置示例：考虑描述以下HTML的情况。

主箱

子框1

子框2

另外，如下所示，需要使用HTML头元素中的元元素来描述“initial-scale：1”。这是采用响应式Web设计时必需的描述，如果您想先通过移动设备编写CSS，这一点至关重要。

*有关详细信息，请查看下面示例页面的HTML源代码。■ 描述在移动第一设计的一个例子的CSS：首先离开描述的布局和设计用于在移动终端（窄环境的水平宽度），以再使用媒体查询，添加的布局要宽的宽度的环境我会继续

/ * --------------------------------------------------------------- * // *▼Mobile First（所有环境通用的设计）* // * --------------------------------------------------------------- * / div.mainbox { 保证金：0 px 0 px 1 em 0 px; padding：1em ; background-color：#ffffcc; border：1px solid darkred; border-radius：12px;} div.sub 1 box { 保证金：0 px 0 px 1 em 0 px; 填充：1EM; 背景色：#Ddffdd; 边框：1px的固体绿色; 边界半径：12px的; } div.sub.box 2 { 保证金：0 px 0 px 1 em 0 px; 填充：1EM; 背景色：#Ddffff; 边框：1px的固体Darkblue; 边界半径：12px的; }/ * -------------------------------------------------------------- * // *▼设计添加为平板电脑设计* // * -------------------------------------------------------------- * /@media all和（min-width：768px）{ div.mainbox { float：left; / * *创建两列* / 宽度：500px; } div.sub 1 box { 保证金：0 px 0 px 0.5 em 550 px; } div.sub.box 2 { 保证金：0 px 0 px 0 px 550 px; }}/ * ------------------------------------ * // *▼作为PC设计添加的设计* // * ------------------------------------ * /@media all和（min-width：920px）{ div.cover { display：table; / * *创建3列* / border-spacing：0em 0px; 保证金：0px; } div.mainbox { float：none; 宽度：60％; 显示：table-cell; 保证金：0px; } div.sub 1 box { 显示：table-cell; 保证金：0px; } div.sub.box 2 { 显示：table-cell; 保证金：0px; }}

在上文中，所有环境共有的样式（=粗体部分），例如“背景颜色”，“框线的装饰”，“内边距”仅在开始时描述一次。因此，如果要修改颜色方案，只需要修复一个位置即可。对于写为“for tablet”或“for PC”的来源，只有更改列组成所需的描述。*以下文章介绍了用于创建上述列结构的描述方法。如果您有兴趣，请另行提及。

在双层组中使用的方法：“ 如何使用样式表创建列 ”三个列集中使用的方法：“ 如何使用CSS而不使用浮点数制作列（多列） ”■ 显示示例：

示例页面显示示例

如果您想在浏览器中实际显示上述来源，请参阅下面的示例页面。您可以通过更改浏览器窗口大小来查看每个终端上的显示。→ 如何编写Mobile First CSS的示例

那么，在上面，您将按照“移动设计”→“平板电脑设计”→“PC设计”的顺序继承样式。但是，例如，您可能只想在某些条件下显示，例如“我不想在智能手机上显示（窄屏幕），但想要在PC（宽屏幕）上显示”。

如何仅在特定屏幕尺寸的情况下显示

例如，您可能只想在某些情况下显示它，例如“我不想在移动版本上显示，但想在PC版本上显示”。在这种情况下，很容易利用显示属性。假设我们有以下HTML。

您想要仅在PC上显示的内容

如果只想用PC（=更宽屏幕）显示上述部分，请按如下所示编写显示属性。

/ * --------------------------------------------------------------- * // *▼Mobile First（所有环境通用的设计）* // * --------------------------------------------------------------- * / p.forpc { display：none;}/ * ------------------------------------ * // *▼作为PC设计添加的设计* // * ------------------------------------ * /@media all和（min-width：920px）{ p.forpc { 显示：块; }}

通过首先写入“display：none;”它被隐藏，并且通过描述“display：block;”作为PC（宽屏幕）设计来恢复显示。

仅显示移动设计的旧浏览器

本文中使用的媒体查询的描述方法是CSS 3中添加的规范。您无法使用旧版浏览器阅读。因此，如果您使用旧浏览器进行浏览，则会毫无疑问地显示“移动问题”。这里的旧浏览器如下（※从一开始就支持Chrome）。

IE 8或更低（对应于IE 9）Firefox 3或更低版本（对应Firefox 3.5）Safari 3.2或更低版本（对应于Safari 4）Opera 6或更低版本（对应Opera 7）在上面列出的不受支持的浏览器中，用户可能仍在那里，仅限IE 8。因此，对于旧浏览器来说，最简单的就是“展示移动设计”。但是，在“我想对应于IE 8”的情况下，有一种使用导致IE 8或更低版本来解释媒体查询的脚本的方法。有关如何执行此操作的详细信息，请参阅“ 如何在媒体查询中按屏幕大小切换CSS ”一文的第3页上的“ 在IE 8及更低版本下启用媒体查询 ”一节请。您只需添加3行HTML源即可。*另外，下面的文章“ Legacy First for CSS for first browser first ”中介绍了使用旧浏览器稍微关注显示方法的CSS源的描述方法。

“Mobile First”轻松减少设计工作量

这一次，我们介绍了如何使用“Mobile First”编写CSS源代码，这很容易减少采用响应式Web设计的生产工作量，可以用一个文件创建PC·移动站点。