web 响应式
I recently received a question from a reader regarding development of a single-page HTML résumé, with an example at CSS Tricks cited as a particular inspiration. While Chris Coiyer’s work was excellent, the three years since the original article was published provided an opportunity to improve on the design. In particular:
最近，我收到了一个读者的有关单页HTML简历开发的问题， 并引用了CSS Tricks上的一个示例作为特别的启发。 尽管Chris Coiyer的工作非常出色，但是自原始文章发表以来的三年时间为改进设计提供了机会。 特别是：
The markup for the résumé could be simplified and improved (Chris’s technique uses a lot of empty
divtags).简历的标记可以简化和改进(克里斯的技术使用了很多空的
div标签)。Responsive design techniques could be introduced into the CSS so that the page could be read well on both mobile and desktop browsers.
Effects on the profile photo could be achieved with CSS transforms, rather than being baked into the image with PhotoShop.
可以通过CSS转换来实现对个人资料照片的效果，而不是通过PhotoShop将其烘焙到图像中。
A complete version of the responsive web résumé is available on CodePen. The markup for the résumé is minified HTML5:
可在CodePen上获得响应式Web简历的完整版本 。 简历的标记是最小化HTML5 ：
HTML (The HTML)
<div>
<h1>
<img src="james-moriarty.jpg" alt="Etching of James Moriarty">James Moriarty
</h1>
<p>Cell:
<a href="tel:1-555-666-7777">555-666-7777</a>
<p>Web:
<a href="//moriarty.com">moriarty.com</a>
Email: napoleon@crime.com
<p id="objective">I am a reserved but ambitious young professional, seeking a career that
fits my professional skills, personality, and murderous tendencies. My good birth, excellent
education and phenomenal mathematical faculty have allowed me to advance the prospects
of several criminal enterprises.
<dl>
<dt>Education
<dd>
<h2>Oxford University</h2>
<p><strong>Major:</strong> Applied Mathematics<br>
<strong>Minor:</strong> Romance Languages
</dd>
</dl>
<dl>
<dt>Skills
<dd>
<h2>Office Skills</h2>
<p>Office and records management, database administration, event organization, customer support, travel coordination
<h2>Computer skills</h2>
<p>Microsoft productivity software (Word, Excel, etc), Adobe Creative Suite, Windows
</dd>
</dl>
<dl>
<dt>Experience
<dd>
<h2>Consulting Criminal
<span>London 1892 – present</span></h2>
<ul>
<li>Development within the criminal underworld
<li>Conducted negotiations with several rouge governments
</ul>
<h2>The Coldstream Guards<span>Army Coach,
London 1889 – 1888</span></h2>
<ul>
<li>Recruiting, training and terrorizing young men.
</ul>
<h2>Oxford University<span>Professor of Mathematics
1885 – 1888</span></h2>
<ul>
<li>Published papers in binomials, asteroid dynamics and game theory
<li>Intimidated students
</ul>
</dd>
</dl>
</div>As you can see, markup is standard headings and lists. I’ve added a dynamic link for the telephone number, so that it may be called directly from the page, but there’s nothing else special about the code at this stage.
如您所见，标记是标准标题和列表 。 我为电话号码添加了一个动态链接 ，以便可以直接从页面中调用它，但是此阶段的代码没有其他特殊之处。
CSS (The CSS)
* { box-sizing: border-box; }
body { margin: 2.2rem; }
div { min-width: 380px;
background: url('noise.jpg');
font: 16px Helvetica, sans-serif;
line-height: 24px;
}
h1 {
margin: 0 0 16px 0;
padding: 0 0 16px 0;
font-size: 42px;
font-weight: bold;
letter-spacing: -2px;
border-bottom: 1px solid #999;
line-height: 50px; }
h2 {
font-size: 20px;
margin: 0 0 6px 0;
position: relative;
}
h2 span {
position: absolute;
bottom: 0; right: 0;
font-size: 16px;
color: #999;
font-weight: normal;
}
p { margin: 0 0 16px 0; }
a {
color: #999;
text-decoration: none;
border-bottom: 1px dotted #999;
}
a:hover {
border-bottom-style: solid;
color: black; }
p#objective {
color: #666;
}
h2 span, p#objective {
font-family: Georgia, serif;
font-style: italic;
}
dt {
font-style: italic;
font-weight: bold;
font-size: 18px;
text-align: right;
padding: 0 26px 0 0;
width: 150px;
border-right: 1px solid #999;
}
dl { display: table-row; }
dl dt, dl dd {
display: table-cell;
padding-bottom: 20px;
}
dl dd {
width: 500px;
padding-left: 26px;
}I’m using fairly standard CSS here, with box-sizing set up to make measuring containers easier. Similarly, fonts are measured in pixels for ease of use; ideally the typefaces would be measured in rem or – once browsers begin to support it – vw units. I’ve used Chris’ noise image as a background-image to provide more of a page feel, with the same fonts. The education, skills and experience sections are placed side-by-side through the use of display: table and related values. We’re using position: absolute on the <span> elements inside the headings with position: relative applied so that we can place the <span> content flush right on the same line. Note that you’d need to add vendor prefixes to support the rotation of the image in current browsers.
我在这里使用相当标准CSS，并设置了box-sizing以方便测量容器。 同样， 字体以像素为单位，以方便使用。 理想情况下，字体的字体应以rem或(一旦浏览器开始支持) vw单位进行度量 。 我将克里斯的杂色图像用作background-image ，以相同的字体提供了更多的页面感觉。 通过使用display: table和相关值，教育，技能和经验部分并排放置。 我们使用position: absolute的<span>与标题中的元素position: relative应用，使我们可以将<span>在同一行内容右对齐。 请注意，您需要添加供应商前缀来支持当前浏览器中图像的旋转 。
In the words of Ethan Marcotte, this CSS is effectively the default responsive style sheet for those browsers that don’t yet support media queries. The only responsive portion is the style declaration that we place on the image: rather than measuring its width and height in pixels, we measure the picture’s width as a percentage relative to the document it is a part of:
用Ethan Marcotte的话来说，对于那些尚不支持媒体查询的浏览器，此CSS实际上是默认的响应样式表。 唯一的响应部分是我们放置在图像上的样式声明：我们不是以像素为单位来衡量其宽度和高度，而是以相对于其所包含的文档的百分比来衡量图片的宽度：
制作响应式图像 (Making A Responsive Image)
img {
float: right;
padding: 10px;
background: #fff;
margin: 0 30px;
transform: rotate(-4deg);
box-shadow: 0 0 4px rgba(0,0,0,0.3);
width: 30%; max-width: 220px;
}We assign a max-width to the image so that it doesn’t grow too large in comparison to the document at large window sizes. Browsers that don’t support this property will display the image at its native size. Browser that do support max-width should also respond to media queries: for those, we will add breakpoints where the design starts to look bad as the browser narrows, not in response to specific measurements for any particular device:
我们为图像分配max-width ，以便与大窗口尺寸的文档相比，它不会变得太大。 不支持此属性的浏览器将以原始大小显示图像。 浏览器做支持max-width也应媒体询问作出答复：针对这一情况，我们将添加断点在设计开始看起来很糟糕的浏览器变窄 ，不响应任何特定的设备特定的测量：
添加@media查询 (Adding the @media Queries)
@media screen and (max-width: 1100px) {
h2 span {
position: static;
display: block;
}
}
@media screen and (max-width: 550px) {
img {
transform: rotate(0deg);
}
}
@media screen and (max-width: 400px) {
dl dt {
border-right: none;
border-bottom: 1px solid #999;
}
dl, dl dd, dl dt {
display: block;
padding-left: 0;
margin-left: 0;
padding-bottom: 0;
text-align: left;
width: 100%;
}
dl dd {
margin-top: 6px;
}
h2 {
font-style: normal;
font-weight: 400;
font-size: 18px;
}
dt { font-size: 20px; }
img { margin: 0; }
}These media queries are essentially a series of if statements in CSS: if the browser window is 1100 pixels wide or less, we break the span elements from being flush right to place them underneath the headings; at 550px, this rule is joined by rotating the image upright, and at 400 pixels and below, we display most of the resume with block so that the information falls vertically, rather than being arranged horizontally.
这些媒体查询本质上是CSS中的一系列if语句：如果浏览器窗口的宽度为1100像素或更小，我们将span元素从齐平的位置移到标题的下面； 在550像素处，此规则通过垂直旋转图像而结合在一起；在400像素及以下像素处，我们使用block显示大多数简历，以使信息垂直放置而不是水平放置。
Don’t forget to add the "I know what I’m doing" meta tag for responsive design into the <head> of your document, so that your page is scaled correctly on mobile devices:
不要忘记将响应式设计的“我知道我在做什么” meta标记添加到文档的<head>中，以便在移动设备上正确缩放页面：
<meta name="viewport" content="width=device-width, initial-scale=1.0">结论 (Conclusion)
This completes the presentation of our page, but it is still missing microformat information, which will greatly benefit its position in search engines… and since the very point of a résumé is for it to be found, that is an aspect I address in the next article.
这样就完成了我们页面的介绍，但是仍然缺少微格式信息，这将极大地有利于其在搜索引擎中的地位……而且，因为要找到简历的重点，所以我接下来要解决的一个方面文章。
翻译自: https://thenewcode.com/553/Build-A-Responsive-Web-Resume
web 响应式
扫一扫
497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
