CSS3 media queries to make your normal website as complete responsive website | 2my4edge

24 February 2022

CSS3 media queries to make your normal website as complete responsive website

Using media query is one of old method of making our website responsive, now a days people are moving to css frameworks like bootstrap, etc. though we need to use media query for some unavoidable times. so here i'm giving you some solution to make your website as responsive website, and also it helps for SEO purpose also. Lets see the code and solution.

CSS3 media queries to make your normal website as responsive website


We have 3 ways to implement the media queries to our website.

1. Using @import Method
2. Writing media query directly in style sheet
3. including linked style sheet media attribute.

USING @import rule in CSS
Add this code in style tag
@import url(style300.css) screen and (min-width: 300px);
@import url(style768.css) screen and (min-width: 768px);
@import url(style632.css) screen and (min-width: 632px);
@import url(style1000.css) screen and (min-width: 1000px);

Writing Media Queries directly in Style sheet
<style type="text/css">
/* Default Css code goes here */

@media only screen and (min-width: 300px){
/* Css code goes here */
}

@media only screen and (min-width: 768px){
/* Css code goes here */
}

@media only screen and (max-width: 632px) {
/* Css code goes here */
}

@media only screen and (min-width: 1000px){
/* Css code goes here */
}
</style>

Include a Query in linked style sheet media attribute
<link rel="stylesheet" type="text/css" 
media="screen and (max-device-width: 300px)" href="style300.css" />
<link rel="stylesheet" type="text/css" 
media="screen and (max-device-width: 768px)" href="style768.css" />
<link rel="stylesheet" type="text/css" 
media="screen and (max-device-width: 632px)" href="style632.css" />
<link rel="stylesheet" type="text/css" 
media="screen and (max-device-width: 1000px)" href="style1000.css" />

And another one important thing is meta viewport
<meta content='width=device-width, initial-scale=1' name='viewport'/>

If you are using Blogger means you need to change one thing in template HTML EDIT
First you need to Disable the Mobile view in template. Then Click on EDIT HTML.
<b:if cond='data:blog.isMobile'>
  <meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' 
name='viewport'/>
    <b:else/>
  <meta content='width=1100' name='viewport'/>
</b:if>
Just comment that code or remove that code, Replace with the below code
<meta content='width=device-width, initial-scale=1' name='viewport'/>

I hope this post is really helpful to designers and also to Bloggers. Keep visiting for more updates. Thank you.

6 comments:

  1. Blogger this code not working.

    ReplyDelete
  2. @Karthick M

    it may be fixed of your template skin in your blog. comment that and try again


    <b:template-skin>
    <!--<b:variable default='960px' name='content.width' type='length' value='1100px'/>-->







    you need to comment that line like the above.

    ReplyDelete
  3. It's either the entire image is reduced in size or only portions of it is displayed.responsive website designing

    ReplyDelete
  4. Ohhh Really Very Good information about responsive website. Thanks to share it...Kids Party Planner Delhi NCR

    ReplyDelete
  5. Thank you very much for sharing your findings. I believe this research will be much helpful in coming up with different things.

    ReplyDelete

^