Bear RWD
52
CS-ID Bear Lee RWD and Mobile Web
-
Upload
desbear-li -
Category
Internet
-
view
100 -
download
1
Transcript of Bear RWD
CS-ID Bear Lee
RWD and Mobile Web
Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).
Still from Wiki say…
RWDRWD能
想 RWDCSS
會 能
...
...
...
...
...
⼀一的
能
Media Queries
CSS
都 下
...
@media [media type] and [(media feature)]
Media Queries
all aural braille embossed handheld
print projection screen tty tv
media type
也有 CSS 多 Opera mini 多
All screen( )能
width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | aspect-ratio | min-aspect-ratio | max-aspect-ratio | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid
media features
<link rel="stylesheet" type="text/css" href="760.css" media=“ screen and (min-width: 768px) and (max-width: 979px) ">
1
@media screen and (min-width: 768px) and (max-width: 979px) { .content{ width:700px; margin:0 auto; } }
2
.............. Scss
2
SCSS(SASS) CSS Preprocessor 多Nest,Variable,Mixin,extend, for loop, if會 ...
.content{ width:960px; margin:0 auto; @media screen and (min-width: 768px) and (max-width: 979px) { width:700px; }//content 768-979 }//content end
是
media queries W3C ” ” 多
http://caniuse.com/
⼈人 IE5678.. 多
⼈人 IE5678.. 多https://css3-mediaqueries-
js.googlecode.com/svn/trunk/css3-mediaqueries.js
https://rawgit.com/scottjehl/Respond/master/dest/respond.src.js
⼈人 IE5678.. 多
https://rawgit.com/scottjehl/Respond/master/dest/respond.src.js
就 ⼀一HTML CSS
RWD能
RWD
RWD 個到
RWD 個到
RWD 個到
RWD 個到
RWD 個到
我 來能
個到
我 來能
個到
Mobile Device不 CSS
HTML 能
RWD
RWD
⼤大 了在 HTML
想 能
...
App
Mobile Web app
要 上
好
position:absolute; (fixed has performance issue)
⾃自 這 (Momentum Scrolling)
overflow:scroll; -webkit-overflow-scrolling: touch;
iscroll javascript plugin
好
能
好
css3 animation or transition touchstart to load or include
Mobile app 為
<meta name="viewport" content=“ initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
initial-scale 到 minimum-scale 看 到 maximum-scale 看 到 user-scalable 看 1 or 0 (yes or no)
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" sizes="72x72" href="XXX.png"/>
App mod
App icon
<meta name="format-detection" content="telephone=no">
你 Mobile Web
