一定要知道的網頁設計技術—RWD
Intro
- RWD is Responsive Web Design.
- RWD makes web page look good on all devices.
- RWD uses only HTML and CSS.
Viewport
- The viewport is the user's visible area of a web page.
- The viewport varies with the device.
Setting The Viewport
Include the following <meta> viewport element in all web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Some rules to follow
- Do NOT use large fixed width elements
- Do NOT let the content rely on a particular viewport width to render well
- Use CSS media queries to apply different styling for small and large screens
Grid View
A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* makes sure padding and border are included in total width and height of elements. */
* {
box-sizing: border-box;
}
/* All columns floating to left, and have a padding of 15px */
[class*="col-"] {
float: left;
padding: 15px;
}
/* calculate percentage for one column: 100% / 12 columns = 8.33% */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.header {
background-color: #0099cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #ff1a75;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.aside {
background-color: #ff1a75;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
</style>
</head>
<body>
<div class="header">
<h1>Joanne's Blog</h1>
</div>
<div class="row">
<div class="col-3 menu"> <!-- 25% -->
<ul>
<li>Home</li>
<li>Topic</li>
<li>About</li>
</ul>
</div>
<div class="col-6"> <!-- 50% -->
<h1>About</h1>
<p>Hi there! This is my website. I’m a senior in NCCU, and I major in Management Information System, minor
in Korean and Japanese. On this site, I will record my experiences in learning and coding.</p>
</div>
<div class="col-3"> <!-- 25% -->
<div class="aside">
<h2>Latest Posts</h2>
<p>[Exercism-JavaScript] Mixed Juices</p>
<p>政大資管所甄試分享</p>
<p>不可不知的 JavaScript 基本觀念</p>
</div>
</div>
</div>
</body>
</html>
look good on a large screen
but do not look good on a small screen
Media Queries
uses the @media rule to include a block of CSS properties only if a certain condition is true
Add Breakpoints
- Certain parts of the design will behave differently on each side of the breakpoint
- Always Design for Mobile First
Example
change the design when the width
- gets larger than 600px but smaller than 768px
- gets larger than 768px
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* makes sure padding and border are included in total width and height of elements. */
* {
box-sizing: border-box;
}
/* All columns floating to left, and have a padding of 15px */
[class*="col-"] {
float: left;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
.header {
background-color: #0099cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #ff1a75;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.aside {
background-color: #ff1a75;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
</style>
</head>
<body>
<div class="header">
<h1>Joanne's Blog</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>Home</li>
<li>Topic</li>
<li>About</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>About</h1>
<p>Hi there! This is my website. I’m a senior in NCCU, and I major in Management Information System, minor
in Korean and Japanese. On this site, I will record my experiences in learning and coding.</p>
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>Latest Posts</h2>
<p>[Exercism-JavaScript] Mixed Juices</p>
<p>政大資管所甄試分享</p>
<p>不可不知的 JavaScript 基本觀念</p>
</div>
</div>
</div>
</body>
</html>
look good on all screens
Other Common Use
- hide elements
- change the font size of an element