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).
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
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.
You should read it
- Viewport simulation with Device Metrics on Chrome
- Resizer - Google's new support tool
- 5 changes on Firefox 15
- Multiple choice questions P2 web design
- The best website load testing tools available today
- Good story: Starting a business from basic values
- How to create multiple size images at the same time
- 6 leading website design companies in Vietnam
May be interested
- How to create multiple size images at the same timelaazy is a photo design tool for websites, blogs or applications of many sizes.
- Introduction to HTMLa few basic things to know about html before starting to learn this language.
- HTML test has part 3 answersnext 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 HTMLwhen 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 Softwarethis 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 KompoZerkompozer 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 tricksthis article will introduce you to some of the widely used html and xhtml tricks.
- How to Make a Scrolling Marquee in HTMLa 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 filewe 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 HTMLin 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.