HTML Responsive Web Design - W3Schools

Responsive web design is about creating web pages that look good on all devices! A responsive web design will automatically adjust for different screen sizes ... Tutorials References Exercises Videos Menu Login PaidCourses WebsiteNEW ProNEW HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP HOWTO W3.CSS JAVA JQUERY C C++ C# R React    Darkmode Darkcode × Tutorials HTMLandCSS LearnHTML LearnCSS LearnRWD LearnBootstrap LearnW3.CSS LearnColors LearnIcons LearnGraphics LearnSVG LearnCanvas LearnHowTo LearnSass DataAnalytics LearnAI LearnMachineLearning LearnDataScience LearnNumPy LearnPandas LearnSciPy LearnMatplotlib LearnStatistics LearnExcel XMLTutorials LearnXML LearnXMLAJAX LearnXMLDOM LearnXMLDTD LearnXMLSchema LearnXSLT LearnXPath LearnXQuery JavaScript LearnJavaScript LearnjQuery LearnReact LearnAngularJS LearnJSON LearnAJAX LearnAppML LearnW3.JS Programming LearnPython LearnJava LearnC LearnC++ LearnC# LearnR LearnKotlin LearnGo LearnDjango LearnTypeScript ServerSide LearnSQL LearnMySQL LearnPHP LearnASP LearnNode.js LearnRaspberryPi LearnGit LearnAWSCloud WebBuilding CreateaWebsiteNEW WhereToStart WebTemplates WebStatistics WebCertificates WebDevelopment CodeEditor TestYourTypingSpeed PlayaCodeGame CyberSecurity Accessibility DataAnalytics LearnAI LearnMachineLearning LearnDataScience LearnNumPy LearnPandas LearnSciPy LearnMatplotlib LearnStatistics LearnExcel LearnGoogleSheets XMLTutorials LearnXML LearnXMLAJAX LearnXMLDOM LearnXMLDTD LearnXMLSchema LearnXSLT LearnXPath LearnXQuery × References HTML HTMLTagReference HTMLBrowserSupport HTMLEventReference HTMLColorReference HTMLAttributeReference HTMLCanvasReference HTMLSVGReference GoogleMapsReference CSS CSSReference CSSBrowserSupport CSSSelectorReference Bootstrap3Reference Bootstrap4Reference W3.CSSReference IconReference SassReference JavaScript JavaScriptReference HTMLDOMReference jQueryReference AngularJSReference AppMLReference W3.JSReference Programming PythonReference JavaReference ServerSide SQLReference MySQLReference PHPReference ASPReference XML XMLDOMReference XMLHttpReference XSLTReference XMLSchemaReference CharacterSets HTMLCharacterSets HTMLASCII HTMLANSI HTMLWindows-1252 HTMLISO-8859-1 HTMLSymbols HTMLUTF-8 × ExercisesandQuizzes Exercises HTMLExercises CSSExercises JavaScriptExercises SQLExercises MySQLExercises PHPExercises PythonExercises NumPyExercises PandasExercises SciPyExercises jQueryExercises JavaExercises C++Exercises C#Exercises RExercises KotlinExercises GoExercises BootstrapExercises Bootstrap4Exercises Bootstrap5Exercises GitExercises Quizzes HTMLQuiz CSSQuiz JavaScriptQuiz SQLQuiz MySQLQuiz PHPQuiz PythonQuiz NumPyQuiz PandasQuiz SciPyQuiz jQueryQuiz JavaQuiz C++Quiz C#Quiz RQuiz KotlinQuiz XMLQuiz BootstrapQuiz Bootstrap4Quiz Bootstrap5Quiz CyberSecurityQuiz AccessibilityQuiz Courses HTMLCourse CSSCourse JavaScriptCourse FrontEndCourse SQLCourse PHPCourse PythonCourse NumPyCourse PandasCourse DataAnalyticsCourse jQueryCourse JavaCourse C++Course C#Course RCourse XMLCourse CyberSecurityCourse AccessibilityCourse Certificates HTMLCertificate CSSCertificate JavaScriptCertificate FrontEndCertificate SQLCertificate PHPCertificate PythonCertificate DataScienceCertificate Bootstrap3Certificate Bootstrap4Certificate jQueryCertificate JavaCertificate C++Certificate ReactCertificate XMLCertificate × Tutorials References Exercises PaidCourses Spaces Videos Shop Pro HTMLTutorial HTMLHOME HTMLIntroduction HTMLEditors HTMLBasic HTMLElements HTMLAttributes HTMLHeadings HTMLParagraphs HTMLStyles HTMLFormatting HTMLQuotations HTMLComments HTMLColors Colors RGB HEX HSL HTMLCSS HTMLLinks Links LinkColors LinkBookmarks HTMLImages Images ImageMap BackgroundImages ThePictureElement HTMLFavicon HTMLTables HTMLTables TableBorders TableSizes TableHeaders Padding&Spacing Colspan&Rowspan TableStyling TableColgroup HTMLLists Lists UnorderedLists OrderedLists OtherLists HTMLBlock&Inline HTMLClasses HTMLId HTMLIframes HTMLJavaScript HTMLFilePaths HTMLHead HTMLLayout HTMLResponsive HTMLComputercode HTMLSemantics HTMLStyleGuide HTMLEntities HTMLSymbols HTMLEmojis HTMLCharset HTMLURLEncode HTMLvs.XHTML HTMLForms HTMLForms HTMLFormAttributes HTMLFormElements HTMLInputTypes HTMLInputAttributes HTMLInputFormAttributes HTMLGraphics HTMLCanvas HTMLSVG HTMLMedia HTMLMedia HTMLVideo HTMLAudio HTMLPlug-ins HTMLYouTube HTMLAPIs HTMLGeolocation HTMLDrag/Drop HTMLWebStorage HTMLWebWorkers HTMLSSE HTMLExamples HTMLExamples HTMLQuiz HTMLExercises HTMLCertificate HTMLSummary HTMLAccessibility HTMLReferences HTMLTagList HTMLAttributes HTMLGlobalAttributes HTMLBrowserSupport HTMLEvents HTMLColors HTMLCanvas HTMLAudio/Video HTMLDoctypes HTMLCharacterSets HTMLURLEncode HTMLLangCodes HTTPMessages HTTPMethods PXtoEMConverter KeyboardShortcuts HTMLResponsiveWebDesign ❮Previous Next❯ Responsivewebdesignisaboutcreatingwebpagesthatlookgoodonalldevices! Aresponsivewebdesignwillautomaticallyadjustfordifferentscreensizesandviewports. WhatisResponsiveWebDesign? ResponsiveWebDesignisaboutusingHTMLandCSStoautomaticallyresize,hide,shrink,orenlarge, awebsite,tomakeitlookgoodonalldevices(desktops,tablets,andphones): TryitYourself» SettingTheViewport Tocreatearesponsivewebsite,addthefollowing tagtoallyourwebpages: Example TryitYourself» Thiswillsettheviewportofyourpage,whichwillgivethebrowserinstructionsonhow tocontrolthepage'sdimensionsandscaling. Hereisanexampleofawebpagewithouttheviewportmetatag,andthesamewebpagewiththeviewportmetatag: Withouttheviewportmetatag: Withtheviewportmetatag: Tip:Ifyouarebrowsingthispageonaphoneoratablet,youcanclickonthetwolinksabovetoseethedifference. ResponsiveImages Responsiveimagesareimagesthatscalenicelytofitanybrowsersize. UsingthewidthProperty IftheCSSwidthpropertyissetto100%,theimagewillberesponsiveandscale upanddown: Example TryitYourself» Noticethatintheexampleabove,theimagecanbescaleduptobelargerthanitsoriginalsize. Abettersolution,inmanycases,willbetousethemax-widthpropertyinstead. Usingthemax-widthProperty Ifthemax-widthpropertyissetto100%,theimagewillscaledownifithasto,butneverscaleuptobelargerthanitsoriginalsize: Example TryitYourself» ShowDifferentImagesDependingonBrowserWidth TheHTMLelementallowsyoutodefinedifferentimagesfor differentbrowserwindowsizes. Resizethebrowserwindowtoseehowtheimagebelowchangedependingonthewidth: Example      TryitYourself» ResponsiveTextSize Thetextsizecanbesetwitha"vw"unit,whichmeansthe"viewportwidth". Thatwaythetextsizewillfollowthesizeofthebrowserwindow: HelloWorld Resizethebrowserwindowtoseehowthetextsizescales. Example HelloWorld TryitYourself» Viewportisthebrowserwindowsize.1vw=1%ofviewportwidth.Iftheviewportis50cmwide,1vwis0.5cm. MediaQueries Inadditiontoresizetextandimages,itisalsocommontousemediaqueries inresponsivewebpages. Withmediaqueriesyoucandefinecompletelydifferentstylesfordifferentbrowser sizes. Example:resizethebrowserwindowtoseethatthethreedivelementsbelowwilldisplay horizontallyonlargescreensandstackedverticallyonsmallscreens: MainContent RightContent Example TryitYourself» Tip:TolearnmoreaboutMediaQueriesandResponsiveWebDesign,readourRWDTutorial. ResponsiveWebPage-FullExample Aresponsivewebpageshouldlookgoodonlargedesktopscreensandonsmallmobilephones. TryitYourself» EverheardaboutW3SchoolsSpaces?Hereyoucancreateyourwebsitefromscratchoruseatemplate,andhostitforfree. Getstartedforfree❯ *nocreditcardrequired ResponsiveWebDesign-Frameworks AllpopularCSSFrameworksofferresponsivedesign. Theyarefree,andeasytouse. W3.CSS W3.CSSisamodernCSSframeworkwithsupportfordesktop,tablet,andmobile designbydefault. W3.CSSissmallerandfasterthansimilarCSSframeworks. W3.CSSisdesignedtobeahighqualityalternativetoBootstrap. W3.CSSisdesignedtobeindependentofjQueryoranyotherJavaScriptlibrary. W3.CSSDemo Resizethepagetoseetheresponsiveness! London LondonisthecapitalcityofEngland. ItisthemostpopulouscityintheUnitedKingdom, withametropolitanareaofover13millioninhabitants. Paris ParisisthecapitalofFrance. TheParisareaisoneofthelargestpopulationcentersinEurope, withmorethan12millioninhabitants. Tokyo TokyoisthecapitalofJapan. ItisthecenteroftheGreaterTokyoArea, andthemostpopulousmetropolitanareaintheworld. Example

TryitYourself» TolearnmoreaboutBootstrap,gotoourBootstrapTutorial. ❮Previous Next❯ NEW WejustlaunchedW3Schoolsvideos Explorenow COLORPICKER Getcertifiedbycompletingacoursetoday! w3schoolsCERTIFIED.2022 Getstarted CODEGAME PlayGame