How to make a website responsive

How to make a website responsive

6 min read

In this week of my internship which i made responsive website. In this days i came to know that how we make a responsive website,so we will know how make a responsive website.

What is Responsive Web Design?
Responsive Web design is the approach that suggests that design and development should    respond to the user’s behavior and environment based on screen size, platform and orientation. Responsive web design makes your web page look good on all devices.

What is The View port?

  • The view port is the user’s visible area of a web page.
  • The view port varies with the device, and will be smaller on a mobile phone than on a computer screen.
  • Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed
    size.
  • Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the view port. To fix this, browsers
    on those devices scaled down the entire web page to fit the screen.


Setting The Viewport In Html File
To create a responsive website, add the following <meta> tag to all your web pages. HTML5 introduced a method to let web designers take control over the view port, through the <meta> tag.

You should include the following <meta> view port element in all your web pages:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

This will set the view port of your page, which will give the browser instructions on how to control the page’s dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.


What is a Media Query?
Media query is a CSS technique introduced in CSS 3. It uses the @media rule to include a block of CSS properties only if a certain condition is true.

If the browser window is 600 px. or smaller, the background color will be light blue:

                  @media only screen and (max-width: 600px) {
                                               body {
                                                        background-color: lightblue;
                                                        }
                                            }

Add a Break point
Media queries can help with that. We can add a break point where certain parts of the design will behave differently on each side of the break point. We will also insert a break point between tablets and mobile phones.

Typical Device Breakpoints
There are tons of screens and devices with different heights and widths, so it is hard to create an exact break point for each device. To keep things simple you could target five groups:
/* Extra small devices (phones, 600 px and down) */
@media only screen and (max-width: 600 px) {…}

/* Small devices (portrait tablets and large phones, 600 px and up) */
@media only screen and (min-width: 600 px) {…}

/* Medium devices (landscape tablets, 768 px and up) */
@media only screen and (min-width: 768 px) {…}

/* Large devices (laptops/desktops, 992 px and up) */
@media only screen and (min-width: 992 px) {…}

/* Extra large devices (large laptops and desktops, 1200 px and up) */
@media only screen and (min-width: 1200px){…}

Media types
Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type will be implied.

all
Suitable for all devices.
print
Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)
screen
Intended primarily for screens.
speech
Intended for speech synthesizers.


Logical operators
The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.

and
The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.

not
The not operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.

only
The only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. When not using only, older browsers would interpret the query screen and (max-width: 500px) simply as screen, ignoring the remainder of the query, and applying its styles on all screens. If you use the only operator, you must also specify a media type.

, (comma)
Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.

How Min- and Max-Width Queries Work?

Max-width
Here is an example of a max-width query.

@media only screen and (max-width: 600px) {…}
What this query really means, is “If [device width] is less than or equal to 600px, then do {…}”


Min-width
Here is an example of a min-width query.

@media only screen and (min-width: 600px) {…}
What this query really means, is “If [device width] is greater than or equal to 600px, then do {…}”

Combining media query expressions
Max-width and min-width can be used together to target a specific range of screen sizes.

@media only screen and (max-width: 600px) and (min-width: 400px) {…}
The query above will trigger only for screens that are 600-400px wide. This can be used to target specific devices with known widths.

Choose your Reaction!
Leave a Comment