Responsive Web Design with HTML5 and CSS3

教你使用HTML5和CSS3进行响应式Web设计，想快下Responsive Web design with html5 and csS3Second editionCopyright o 2015 Packt PublishingAll rights reserved. No part of this book may be reproduced, stored in a retrievalystem, or transmitted in any form or by any means, without the prior writtenpermission of the publisher, except in the case of brief quotations embedded incritical articles or reviewsEvery effort has been made in the preparation of this book to ensure the accuracyof the information presented. However, the information contained in this book issold without warranty either express or implied. Neither the author, nor packtPublishing and its dealers and distributors will be held liable for any damagescaused or alleged to be caused directly or indirectly by this bookPackt Publishing has endeavored to provide trademark information about all of thecompanies and products mentioned in this book by the appropriate use of capitalsHowever, Packt Publishing cannot guarantee the accuracy of this informationFirst published: April 2012Second edition: August 2015Production reference: 2200815Published by packt Publishing ltdLivery place35 Livery streetBirmingham b3 2PB, UKISBN978-1-78439893-4www.packtpub.comCreditsAuthorCopy EditorsBen frainRebecca youeSonia cheemaReviewersEsteban s. abaitProject CoordinatorChristopher Scott HenandezBijal PatelMauvis ledfordSophie WilliamsProofreaderSafis editiCommissioning EditorEdward GordonIndexerMariamman chettiyarAcquisition EditorsEdward GordonProduction CoordinatorSubho GuptaNileshr. mohiteCover workContent Development EditorPooja nairNileshr. mohiteTechnical editorAnkita ThakurAbout the authorBen Frain has been a web designer/developer since 1996. He is currently employeds a senior front-end developer at Bet365Before the web, he worked as an underrated (and modest) tv actor and technologyjournalist, having graduated from Salford University with a degree in Media andPerformanceHe has written four equally underrated (his opinion) screenplays and still harborsthe(fading) belief he might sell one. Outside of work, he enjoys simple pleasuresPlaying indoor football while his body and wife still allow it, and wrestling with histwo sonsHis other book, Sass and Compass for Designers is available now. Visit Ben online atwww.benfrain.comandfollowhimontwitterattwittercom/benfrain.I'd like to thank the technical reviewers of this book for giving uptheir free time to provide valuable input. Thanks to them, this is abetter productI'd also like to thank the web community at large for their continuedsharing of information. Without them I wouldn't be able to enjoy myworking days as a web developerMost importantly, a note of appreciation for my family. Manyepisodes of sub-standard TV(wife), cups of tea(parents), andpiratical sword-fights(sons) were sacrificed for the writing ofthis bookAbout the reviewersEsteban s. abait is a senior software architect and former phd student. He hasexperience devising the architecture of complex software products, and planning theirdevelopment. He has worked both onsite and offshore for clients such as Cisco, Intuitand Southwest. Throughout his career, he has worked with different technologies suchas Java, PHP, Ruby, and Node. js among others. In recent years, his main interests haverevolved around web, mobile and rESt aPIs. He has developed large, maintainableweb applications using JavaScript. In addition, he has worked to assess clients on RESTbest practices On the other hand he has worked on high traffic websites, where topicssuch as replication, sharding, or distributed caches are key to scalabilityEsteban is currently working at globant as a technical director In this role, heworks to ensure projects' delivery meet their deadlines with the best quality he alsodesigns software program training, and interviews software developers. In addition,he usually travels to clients to provide consultancy on web technologiesGlobant(http://www.globant.com/)isanewbreedoftechnologyserviceproviderfocused on delivering innovative software solutions by leveraging emergingtechnologies and trends. Globant combines the engincering and technical rigor of ITservice providers with the creative and cultural approach of digital agencies, Globantis the place where engineering, design, and innovation meet scaleChristopher Scott Hernandez is a designer turned developer who has beenworking on the Web since 1996, when he built the Web's first boat upholstery sitefor his dad. He's since moved on to bring his expertise to companies small andlarge, having worked on some of the most visited sites in the world including ebay,LinkedIn, and AppleHe was also a technical reviewer for hTML5 Multimedia development cookbook, PacktPublishing. Chris is an avid reader and lover of books. When he's not pushing pixelsand writing code, he enjoys spending time with his wife and daughter exploring theparks and trails of the beautiful Austin, TexasMauvis ledford is a full-stack founder and CTo specializing in the realm of theweb, mobile web, and scaling applications on the cloudMauvis has contributed to products at Disney Mobile, Skype, Netflix, and manystart-ups in the san francisco and New york city areas. he is currently cto atPathbrite, an edTech start-up specializing in free, responsive, multimedia e-portfoliosanddigitalresumesforeveryoneCreateyourownathttp://www.pathbrite.comMauvis was also a technical reviewer for the first edition of responsive weh designwith html5 and Css3, Packt Publishing and Building Hybrid Android apps with javaand Javascript, O Reilly mediaSophie williams is a bit of a perfectionist and has a thing for typography. She hasadegreeingraphicdesignandiscurrentlyawebuidesigneratwww.bet365.com..While she loves designing for the Web, she will always have a special place in her heartfor letterpress and print. Outside of work, she makes mean cupcakes, experiments witharts and crafts, and loves to point out(to anyone who will listen when anything in thereal world is misalignedYoucanfindsOphieatwww.sophiewill.comorfollowheronTwitter@sophiewill13Www.Packtpub.comSupport files, eBooks, discount offers, and moreForsupportfilesanddownloadsrelatedtoyourbookpleasevisitwww.packtpub.coMDid you know that Packt offers e Book versions of every book published, with PDFandepuBfilesavailableYoucanupgradetotheeboOkversionatwww.packtpubcom and as a print book customer, you are entitled to a discount on the e book copyGet in touch with us at service@packtpub com for more detailsAtwww.Packtpub.comyoucanalsoreadacollectionoffreetechnicalarticlessignup for a range of free newsletters, and receive exclusive discounts and offers onPackt books and ebooks团 PACKTLiBhttps://www2.packtpub.com/books/subscription/packtlibDo you need instant solutions to your IT questions? PacktLib is Packt's online digitalbook library. Here, you can search, access, and read Packt's entire library of booksWhy subscribe?Fully searchable across every book published by packtCopy and paste, print, and bookmark contentOn demand and accessible via a web browserFree access for packt account holdersIfyouhaveanaccountwithPacktatwww.packtpub.comyoucanusethistoaccessPacktLib today and view 9 entirely free books. Simply use your login credentials forimmediate accessTable of contentsPrefaceXChapter 1: The Essentials of Responsive Web DesignBeginning our questDefining responsive web designResponsive web design in a nutshellSetting browser support levelsa brief note on tooling and text editorsOur first responsive example12223556Our basic html fileTaming imagesEnter media queries12Amending the example for a larger screen13The shortcomings of our exampleSummaryChapter 2: Media Queries Supporting Differing Viewports19Why media queries are needed for a responsive web design20Basic conditional logic in CSS21Media query syntax21Media queries in link tags22Combining media queriesMedia queries with @import24Media queries in Css24What can media queries test for?25Using media queries to alter a design26Any CSs can be wrapped in a media query28Media queries for HiDPI devices28Considerations for organizing and authoring media queries29Linking to different CSS files with media queries29