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 div tags).

簡歷的標記可以簡化和改進(克里斯的技術使用了很多空的div標簽)。

Responsive design techniques could be introduced into the CSS so that the page could be read well on both mobile and desktop browsers.

可以將響應設計技術引入CSS，以便可以在移動和桌面瀏覽器上很好地閱讀頁面。

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 thatfits 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 響應式

總結

以上是生活随笔為你收集整理的web 响应式_建立响应式Web简历的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。