响应式网页设计初探_王愉

223Vol.22No.3JournalofBeijingInstituteofGraphicCommunication20146Jun.20142014-03-18“”201510015005。102600Web。。G20A1004-8626201403-0013-03OnＲesponsiveWebDesignWANGYuPANMingmingBeijingInstituteofGraphicCommunicationBeijing102600ChinaAbstractWiththerapiddevelopmentofmobileInternetandtheproliferationofintelligentdeviceshowtodevelopawebsitewithhighperformanceinallcontexthasbecometheimportantissuewhichtoday'swebdesignershavetoface．Becausere-sponsivewebdesigncanprovideoptimaluserexperiencesinthedifferentsituationsithasbecomethedesignpracticethatconformstothedevelopingtrendoftheInternet．Keywordsresponsivewebdesignmobilefirstmediaque-riesfluidlayouts、、、、。。。、、。。。。、、、、、、、。。2012。。、2010EthanMarcotteＲWDＲesponsiveWebDesign———MediaQueries、FluidGrids、ScalableImages。、、。。、、。、。、。。MobileFirst。、。。ProgressiveEnhance-mentGracefulDegradation。CSS。MediaQueries。device-widthdevice-heightwidthheightorienta-tionaspect－ratioresolutionppi163ppiＲetina326ppi。“”、、。FluidLayoutsFixedWidth。。FluidWidth。。。ElasticWidth“em”。。25～4545～70。GridLayouts、、。8、10、12、16122、3、4、6。HybridLayouts。。CSSdisplaytable-cell。ContentFirst、、、。SizingFontpx。。em%。“em”1em。“%”“em”“em”。“rem”rootemHTML412014。“rem”。ScalableImages＆Vide-osCSSdisplaynone。。。。Ｒetina。SVGScalableVectorGraphics、。。NavigationMode。。。。、。、。。。、、、。、、、。、、、。DHTMLAJAX。。1TimKadlec．WebM．．2013．2KristoferLayon．Web———、M．．2013．3BenFrain．Web———HTML5CSS3M．．2013．4DDFUXPA．M．2013．513