Certification notes based on open source projects responsive web design | freeCodeCamp.org

preface

Section 1: Basic HTML

Section 2: Basic CSS

Section three: Applied visual design

Section 4: Application of barrier-free

People may access web pages from devices of different shapes and sizes.

With responsive web design, you can design web pages that are flexible to different screen sizes, orientations, and resolutions.

@media

You can adjust the layout of the content for different viewport sizes.

Viewports are the contents of web pages visible to the user in the browser. Viewports change depending on the device accessing the site.

p {
    font-size: 20px;
}

@media (max-height: 800px) {
    p {
        font-size: 10px; }}Copy the code

Responsive Image

Make the picture adaptive to the device size:

  • Set up themax-widthA value of100%Ensures that the image is within the scope of the parent container.
  • Set up theheightProperties forautoCan keep the original aspect ratio of the picture.
<style>
    .responsive-img {
        max-width: 100%;
        height: auto;
    }

    img {
        width: 600px;
    }
</style>

<img class="responsive-img" 
     src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" 
     alt="freeCodeCamp stickers set">
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" 
     alt="freeCodeCamp stickers set">
Copy the code

Retina Image

Use retinal images for high resolution screens: Due to the difference in pixel density between “retina display” and “non-retina display” displays, some images rendered on a high resolution display without considering a high resolution display may not be sharp enough due to “pixelation”.

The easiest way to make images appear correctly on a high-resolution display is to define their width and height as half of their original values.

<style>
    img {
        /* The original size is 200px */
        height: 100px;
        width: 100px;
    }
</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" 
     alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
Copy the code

vw vh vmin vmax

The window unit is the window size (width or height) relative to the device, and the percentage is the size relative to the parent element.

The different Windows units are:

  • vw, such as:10vwMeans 10% of the window width.
  • The vh: 如 3vhMeans 3% of the window height.
  • Vmin: 如 70vminMeans 70% of the height and width of the smaller window.
  • Vmax: 如 100vmaxMeans 100% of the height and width of the larger window.
<style>
    h2 {
        width: 80vw;
        background-color: pink;
    }

    p {
        width: 75vmin;
        background-color: pink;
    }

</style>

<h2>Importantus Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut  sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
Copy the code