Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Viewport

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      RWD Viewport

      A viewport, in the context of responsive web design, is a virtual area used by the browser to render a web page. The viewport is essential to web development and creation of responsive designs that adapt to various devices and screen sizes.
      Viewport can also be specified as the user's visible area of the web page, which is determined by the device's screen size and its resolution. On a desktop, the viewport is the window's size, excluding the toolbar and other elements that are not the part of the web page. And on a mobile device, it is the size of the screen.

      CSS RWD Viewport - Types

      There are mainly two types of viewport, which are as follows:
      • Layout Viewport: It is the virtual area used by the browser to display the web page. The layout viewport is controlled by adding the meta viewport tag in the HTML head section.
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">
      • In the above syntax, the content="width=device-width signifies that the width of the viewport should be set to the width of the device screen, and initial-scale=1.0 is used to set the initial zoom level.
      • Visual Viewport: It represents the part of the layout viewport that is currently visible on the screen. The visual viewport can be changed on zooming in and out.
      Both the viewports are mutable, which means, the dimensions of both can be altered after loading of the page.

      CSS RWD Viewport - Setting

      As mentioned above in the layout viewport, <meta> tag can be used to set the viewport. The use of <meta> tag on every page. gives the browser instructions to control the page's dimensions and scaling.
      Refer the example given below to understand how the viewport can be set and based on the size of the viewport, the content gets altered. Change the viewport size to see the effect.
      <html>
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         #card-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 500px;
         }
         
         @media screen and (max-width: 550px){
            #card-container {
            flex-direction: column
            }
         }
      
         .card {
            width: 100px;
            height: 80px;
            border: 1px solid black;
            border-radius: 10px;
            background-color: aquamarine;
            text-align: center;
            font-size: 4em;
         }
      </style>
      </head>
      <body>
         <div id="card-container">
         <div class="card">
            <span class="card-number">1</span>
         </div>
         <div class="card">
            <span class="card-number">2</span>
         </div>
         <div class="card">
            <span class="card-number">3</span>
         </div>
         </div>
      </body>
      </html>
      In the above example, a media query is added to set the direction of the flex as column, when the screen size reduces upto 550px, else the flex direction is in row.