Design website running on multiple devices (responsive web design) in HTML

Responsive Web Design - What is a responsive web design?

Responsive Web Design just uses HTML and CSS to automatically resize, hide, minimize, enlarge a website to make it look better on any device (desktop, tablet, phone). A website should look nice and fit on every device.

Set viewport

When designing websites that respond well to many devices, add elements .

This will create a viewport for the page, instructing the browser how to control the size on the page. This is an example of a website that does not use a meta viewport (left) and a website that uses a meta viewport (right).

Design website running on multiple devices (responsive web design) in HTML Picture 1

Images have high feedback

Responsive image or responsive image are images that resize to fit the browser size. There are several ways to create images with this ability.

Use width characteristics

If the CSS width property is set to 100%, the image will shrink and enlarge.

Note that the image may be magnified more than the original size, so use the max-width. feature above all else max-width.

Use the max-width property

If you use the max-width and set 100% properties, the image will also shrink when needed but never zoom in to the original size.

Images vary according to the width of the browser

Death in HTML allows to use different images with different browser window sizes.

Text size is highly responsive

Text size can be set in units of 'vw', meaning 'viewport width' (viewport width). Then the text size will display according to the browser window size.

Viewport is the size of the browser window. 1vw = 1% viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Media Query

Besides changing the size of text and images, the use of Media Query to display websites on multiple devices is also very popular because they help define different ways of displaying on different browser sizes.

Media Query

Resize browser window

There will be breakpoints when reaching 800px.

List on the left

main content

List on the right

Design website running on multiple devices (responsive web design) in HTML Picture 2
Design website running on multiple devices (responsive web design) in HTML Picture 3

High-responsive websites look normal on computer screens but will be smaller when viewed on mobile devices. There are many CSS frameworks that make it easy to apply this to your site like w3.css or Bootstrap. Bootstrap uses HTML, CSS and jQuery to bring visibility into multiple devices for the page.

This is an example of a website that uses Bootstrap to display on multiple devices.

4 ★ | 1 Vote

May be interested

  • How to create multiple size images at the same timeHow to create multiple size images at the same time
    laazy is a photo design tool for websites, blogs or applications of many sizes.
  • Introduction to HTMLIntroduction to HTML
    a few basic things to know about html before starting to learn this language.
  • HTML test has part 3 answersHTML test has part 3 answers
    next series of articles about html testing, followed by 15 questions about the html programming language. certainly with this questionnaire you will be more confident in your programming knowledge.
  • Image img in HTMLImage img in HTML
    when you visit the website, you will often see images of all sizes and positions on the page. images in html web pages will help to enrich the content as well as increase the aesthetics of the page.
  • How to Write and Design Your Website Xhtml and CSS with Commercial SoftwareHow to Write and Design Your Website Xhtml and CSS with Commercial Software
    this tutorial walks the designer/developer through the website design and html/css conversion process. this is a detailed tutorial on previews/screens/tools icons and their placement or location in the software packages that will be...
  • Create a simple Website with KompoZerCreate a simple Website with KompoZer
    kompozer is a good and basic web editor, which will allow you to quickly start up and become familiar with this work. the article introduces kompozer through a series of images.
  • Website construction: HTML and XHTML tricksWebsite construction: HTML and XHTML tricks
    this article will introduce you to some of the widely used html and xhtml tricks.
  • How to Make a Scrolling Marquee in HTMLHow to Make a Scrolling Marquee in HTML
    a scrolling marquee is moving text added to a website, but html is no longer commonly used for this feature and is not recommended. the html tag for scrolling marquees has been deleted from the standard html library. to accomplish a...
  • How to save the entire website into an HTML fileHow to save the entire website into an HTML file
    we can save the entire web page as an html file to access it anytime using the singlefile utility installed on the browser.
  • Basic examples of HTMLBasic examples of HTML
    in the previous html lesson, you know which tools to use to write html code, how to save and open html files. this article will give some basic examples of html text.