How do I make a website responsive?
user3016968
I want to know how to make a website, and all of its elements responsive to adapt to different screen sizes: fonts, images etc...
Do I have to do somethings like this:
@media only screen
and (max-width : 320px)
{
//here put the width and height of all the elements in the site
}
and make it for each screen size? Is there an easier way?
JakesRassie
Adaptive layouts (Responsive layouts) consists of the following three factors:
1. Flexible Layouts:
The divs you use to create your web page layouts need to consist of relative length units. This means you shouldn't use fixed widths in your CSS, rather use percentages.
The formula to convert sizes from a design to percentages is (target/context)x100 = result
Lets take the picture above as an example of a design. To calculate what the size of the div on the left is going to be calculated like this: (300px/960px)x100 = 30.25%
The CSS would look something like this:
.leftDiv
{
width: 30.25%;
float: left;
}
.rightDiv
{
width: 65%;
float: left;
}
For text to automatically resize you can use a unit called VW (ViewWidth)
.myText
{
font-size: 1vw;
}
This ensures that the text automatically resize relative to the view width.
2.Flexible Media:
Flexible media applies to images, videos and canvasses which automatically resize relative to its parent.
Example:
img, video, canvass
{
max-width: 100%;
}
This ensures that these elements resize automatically inside its parent.
3. Media Queries:
The next step is to use media queries like you've done in your question, these media queries define certain CSS statements for certain screen sizes. I normally use only three media queries for computers screens, tablets and phone screens. Its not necessary to have more than this because the Flexible Layouts and Flexible Media will ensure relative resizing if done correctly.
You may find this helpful: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
Related
Related Related
- 1
How do I make my website's background image responsive?
- 2
How do I make my responsive website honour "Request a desktop site" on mobiles?
- 3
How do I make this code more responsive?
- 4
How do I make this responsive layout with CSS?
- 5
How do I make a background image responsive?
- 6
How do I make this right content responsive?
- 7
How do i make the sidebar responsive
- 8
How to make my website responsive
- 9
How do I test a responsive website on a Retina Macbook?
- 10
How do I fix a sticky scroll on a mobile responsive website?
- 11
How do I fix a sticky scroll on a mobile responsive website?
- 12
How do I test a responsive website on a Retina Macbook?
- 13
How do I build the "To add content" page of a responsive website
- 14
How to make a responsive single page website with sidebar?
- 15
How do I make a Pinterest Widget Builder Responsive?
- 16
How do I make the navbar responsive depending on the viewport?
- 17
How do I make my absolute-positioned elements responsive?
- 18
How do I make rails form responsive to a hyperlink?
- 19
How do I make semantic ui pages responsive?
- 20
How do I make rails form responsive to a hyperlink?
- 21
how do i make this responsive nav bar work properly?
- 22
How do I make semantic ui pages responsive?
- 23
How do I make a responsive div with scroll content in HTML?
- 24
SilverStripe: How do I make HTTP Request to another website?
- 25
How do I make a website not count my own hits?
- 26
How do I make a picture in my html website clickable?
- 27
How do I make a password for my html website in javascript
- 28
How do I make a default page for my website application with php?
- 29
How do i get IIS to make a website available at a specified URL?
Comments