SlideShare a Scribd company logo
响应式设计
GL
概念 
Responsive Web design 
弹性,流体 布局(column,flexbox,grid) 
响应式css,百分比 
响应式图片 
一些无法实现的(高度等)
其他概念 
•依据分辨率(max-width max-device-width) 
•手机(浏览器)(大部分)为320x480,pc大部分 
为1440x960 
•其他分辨率的变化
How to do it 
• 媒体查询 
• <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"> 
•要点 
• meta name viewport 
• initial-scale=1 
• user-scalable=no
常用伎俩 
• @media screen and ( min-width:960px){} 
• @media screen and ( min-width:700px){} 
• @media screen and ( min-width:480px){} 
• @media screen and ( min-width:320px){} 
• @media screen and ( min-device-width: 960px){} 
• @media screen and (max-width:480px) and (orientation:portrait){} 
• <link rel="stylesheet" type="text/css" href="site.css" media="screen" 
max-width=”480” />
常用伎俩 
• max-width min-width 
• max-height min-height 
• position absolute relative fixed 
• display none block table list-item inline inline-block 
• visibility hidden visible collapse
兼容ie 
<!--[if IE 9]> <html lang="en" class="lt-ie10 no-js"> <!endif]--> 
<!--[if gt IE 9]><!--> <html lang="en" class="no-js"> <!--<![endif]--> 
<<//ssccrriipptt>> 
<<!![[eennddiiff]]---->> JJSS 
<<!!----[[ iiff lltt IIEE 88]]>> 
<<ssccrriipptt ttyyppee==””tteexx//jjaavvaassccrriipptt””>> 
wwiinnddooww..llooccaattiioonn..hhrreeff==””iiee..xxxxxx..ccoomm””;; 
cchhrroommeeffrraammee
4 vs 5
2 vs 3
框架 
• bootstrap 
• foundation 
• and so on
其他 
• 编辑器, sublime emmet, webstorm 
• 调试工具,chrome developer tools, firebug 
• other: sass, haml, coffee, sasscore, icheck
资源站 
• http://learn.shayhowe.com/advanced-html-css/ 
• http://www.qianduan.net/responsive-web-design.html 
• http://www.w3cplus.com/css3/designing-css-layout-• http://beforweb.com/node/6 
https://github.com/marvin1023/sassCore 
https://github.com/fronteed/iCheck/
GGGG

More Related Content

Viewers also liked

04 ClubIN Montefiore Dell'Aso - Progetto seed
04 ClubIN Montefiore Dell'Aso - Progetto seed04 ClubIN Montefiore Dell'Aso - Progetto seed
04 ClubIN Montefiore Dell'Aso - Progetto seed
Stefano Tazzi
 
关于个人记录的理解
关于个人记录的理解关于个人记录的理解
关于个人记录的理解froooo
 
Ued ued2
Ued ued2Ued ued2
Ued ued2
froooo
 
A Year in Black White and Red
A Year in Black White and RedA Year in Black White and Red
A Year in Black White and Red
bwrao
 
Agency analysis focus forward
Agency analysis focus forwardAgency analysis focus forward
Agency analysis focus forward
Ramon Hawkins
 
7 stepssmm
7 stepssmm7 stepssmm
7 stepssmm
Edwin Huertas
 
Enterprise Architecture as IT management method
Enterprise Architecture as IT management methodEnterprise Architecture as IT management method
Enterprise Architecture as IT management method
Pavel Hrabe
 
使用社会化媒体 微博
使用社会化媒体 微博使用社会化媒体 微博
使用社会化媒体 微博froooo
 
Enterprise Information Systems in Science and daily Life
Enterprise Information Systems in Science and daily LifeEnterprise Information Systems in Science and daily Life
Enterprise Information Systems in Science and daily Life
Pavel Hrabe
 
SMALL INVESTORS' GRIEVANCES AND REDRESSAL MECHANISM IN INDIAN CAPITAL MARKET,...
SMALL INVESTORS' GRIEVANCES AND REDRESSAL MECHANISM IN INDIAN CAPITAL MARKET,...SMALL INVESTORS' GRIEVANCES AND REDRESSAL MECHANISM IN INDIAN CAPITAL MARKET,...
SMALL INVESTORS' GRIEVANCES AND REDRESSAL MECHANISM IN INDIAN CAPITAL MARKET,...
Venu Gopal
 

Viewers also liked (10)

04 ClubIN Montefiore Dell'Aso - Progetto seed
04 ClubIN Montefiore Dell'Aso - Progetto seed04 ClubIN Montefiore Dell'Aso - Progetto seed
04 ClubIN Montefiore Dell'Aso - Progetto seed
 
关于个人记录的理解
关于个人记录的理解关于个人记录的理解
关于个人记录的理解
 
Ued ued2
Ued ued2Ued ued2
Ued ued2
 
A Year in Black White and Red
A Year in Black White and RedA Year in Black White and Red
A Year in Black White and Red
 
Agency analysis focus forward
Agency analysis focus forwardAgency analysis focus forward
Agency analysis focus forward
 
7 stepssmm
7 stepssmm7 stepssmm
7 stepssmm
 
Enterprise Architecture as IT management method
Enterprise Architecture as IT management methodEnterprise Architecture as IT management method
Enterprise Architecture as IT management method
 
使用社会化媒体 微博
使用社会化媒体 微博使用社会化媒体 微博
使用社会化媒体 微博
 
Enterprise Information Systems in Science and daily Life
Enterprise Information Systems in Science and daily LifeEnterprise Information Systems in Science and daily Life
Enterprise Information Systems in Science and daily Life
 
SMALL INVESTORS' GRIEVANCES AND REDRESSAL MECHANISM IN INDIAN CAPITAL MARKET,...
SMALL INVESTORS' GRIEVANCES AND REDRESSAL MECHANISM IN INDIAN CAPITAL MARKET,...SMALL INVESTORS' GRIEVANCES AND REDRESSAL MECHANISM IN INDIAN CAPITAL MARKET,...
SMALL INVESTORS' GRIEVANCES AND REDRESSAL MECHANISM IN INDIAN CAPITAL MARKET,...
 

Similar to Reponsive show

Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
Andreas Bovens
 
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designSCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
Frédéric Harper
 
CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design
paultrani
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike Wilcox
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
Andy Stratton
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
mikeleeme
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Andreas Bovens
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
Frédéric Harper
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
Vera Kovaleva
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
GaziAhsan
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Christian Rokitta
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in Brief
EPAM
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Ben MacNeill
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
Raj Lal
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
Approaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & DevelopmentApproaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & Development
Keyideas Infotech Private Limited
 
Going Responsive with WordPress
Going Responsive with WordPressGoing Responsive with WordPress
Going Responsive with WordPress
James Cryer
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
Advancio
 

Similar to Reponsive show (20)

Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...Responsive design: techniques and tricks to prepare your websites for the mul...
Responsive design: techniques and tricks to prepare your websites for the mul...
 
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designSCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
 
CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
Pinkoi Mobile Web
Pinkoi Mobile WebPinkoi Mobile Web
Pinkoi Mobile Web
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
 
Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18Responsive Web Design - Web & PHP Conference - 2013-09-18
Responsive Web Design - Web & PHP Conference - 2013-09-18
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
Responsive Web in Brief
Responsive Web in BriefResponsive Web in Brief
Responsive Web in Brief
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Approaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & DevelopmentApproaches to Responsive Wen Design & Development
Approaches to Responsive Wen Design & Development
 
Going Responsive with WordPress
Going Responsive with WordPressGoing Responsive with WordPress
Going Responsive with WordPress
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
 

Recently uploaded

制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
cuobya
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
davidjhones387
 
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
zyfovom
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
bseovas
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
Toptal Tech
 
Search Result Showing My Post is Now Buried
Search Result Showing My Post is Now BuriedSearch Result Showing My Post is Now Buried
Search Result Showing My Post is Now Buried
Trish Parr
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
uehowe
 
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
bseovas
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
ysasp1
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
fovkoyb
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
Paul Walk
 
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
cuobya
 
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
cuobya
 
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
ukwwuq
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
uehowe
 
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
vmemo1
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
k4ncd0z
 
Azure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdfAzure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdf
AanSulistiyo
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 

Recently uploaded (20)

制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
制作毕业证书(ANU毕业证)莫纳什大学毕业证成绩单官方原版办理
 
Discover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to IndiaDiscover the benefits of outsourcing SEO to India
Discover the benefits of outsourcing SEO to India
 
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
学位认证网(DU毕业证)迪肯大学毕业证成绩单一比一原版制作
 
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
不能毕业如何获得(USYD毕业证)悉尼大学毕业证成绩单一比一原版制作
 
Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!Ready to Unlock the Power of Blockchain!
Ready to Unlock the Power of Blockchain!
 
Search Result Showing My Post is Now Buried
Search Result Showing My Post is Now BuriedSearch Result Showing My Post is Now Buried
Search Result Showing My Post is Now Buried
 
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
办理毕业证(UPenn毕业证)宾夕法尼亚大学毕业证成绩单快速办理
 
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
留学学历(UoA毕业证)奥克兰大学毕业证成绩单官方原版办理
 
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
成绩单ps(UST毕业证)圣托马斯大学毕业证成绩单快速办理
 
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
存档可查的(USC毕业证)南加利福尼亚大学毕业证成绩单制做办理
 
Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?Should Repositories Participate in the Fediverse?
Should Repositories Participate in the Fediverse?
 
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
假文凭国外(Adelaide毕业证)澳大利亚国立大学毕业证成绩单办理
 
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
可查真实(Monash毕业证)西澳大学毕业证成绩单退学买
 
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
制作原版1:1(Monash毕业证)莫纳什大学毕业证成绩单办理假
 
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
留学挂科(UofM毕业证)明尼苏达大学毕业证成绩单复刻办理
 
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
重新申请毕业证书(RMIT毕业证)皇家墨尔本理工大学毕业证成绩单精仿办理
 
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理一比一原版(USYD毕业证)悉尼大学毕业证如何办理
一比一原版(USYD毕业证)悉尼大学毕业证如何办理
 
Azure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdfAzure EA Sponsorship - Customer Guide.pdf
Azure EA Sponsorship - Customer Guide.pdf
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 

Reponsive show

  • 2. GL
  • 3. 概念 Responsive Web design 弹性,流体 布局(column,flexbox,grid) 响应式css,百分比 响应式图片 一些无法实现的(高度等)
  • 4. 其他概念 •依据分辨率(max-width max-device-width) •手机(浏览器)(大部分)为320x480,pc大部分 为1440x960 •其他分辨率的变化
  • 5. How to do it • 媒体查询 • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no"> •要点 • meta name viewport • initial-scale=1 • user-scalable=no
  • 6. 常用伎俩 • @media screen and ( min-width:960px){} • @media screen and ( min-width:700px){} • @media screen and ( min-width:480px){} • @media screen and ( min-width:320px){} • @media screen and ( min-device-width: 960px){} • @media screen and (max-width:480px) and (orientation:portrait){} • <link rel="stylesheet" type="text/css" href="site.css" media="screen" max-width=”480” />
  • 7. 常用伎俩 • max-width min-width • max-height min-height • position absolute relative fixed • display none block table list-item inline inline-block • visibility hidden visible collapse
  • 8. 兼容ie <!--[if IE 9]> <html lang="en" class="lt-ie10 no-js"> <!endif]--> <!--[if gt IE 9]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <<//ssccrriipptt>> <<!![[eennddiiff]]---->> JJSS <<!!----[[ iiff lltt IIEE 88]]>> <<ssccrriipptt ttyyppee==””tteexx//jjaavvaassccrriipptt””>> wwiinnddooww..llooccaattiioonn..hhrreeff==””iiee..xxxxxx..ccoomm””;; cchhrroommeeffrraammee
  • 11. 框架 • bootstrap • foundation • and so on
  • 12. 其他 • 编辑器, sublime emmet, webstorm • 调试工具,chrome developer tools, firebug • other: sass, haml, coffee, sasscore, icheck
  • 13. 资源站 • http://learn.shayhowe.com/advanced-html-css/ • http://www.qianduan.net/responsive-web-design.html • http://www.w3cplus.com/css3/designing-css-layout-• http://beforweb.com/node/6 https://github.com/marvin1023/sassCore https://github.com/fronteed/iCheck/
  • 14. GGGG