#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,688
    Rep Power
    171

    How to build a responsive website


    Hello;

    What would be the best way to make a site that resizes based on the browsers size and browser type?

    By browser size, I mean when you resize the browser instead of adding scroll bars, it reduces the number of columns.

    This is a good example. As you can see the font size is also dynamically set.

    So a few lines or a link to a basic tutorial would be appreciated.

    Thank you
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    14
    Rep Power
    0
    See:
    - http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    - http://css-tricks.com/css-media-queries/

    They works by using the "@media screen". They are added in CSS files, or in separated CSS files.

    examples:
    Code:
    @media screen and (max-width: 640px){
    
    <-- add any css code here -->
    
    example: body { background-color: black; }
    
    <-- add any css code here -->
    
    }
    Everytime the web browser resizes below 640px in width, the "@media screen" code will execute. It doesn't work in IE8 and below versions though. IE8 is an old and sucky browser now anyway.

    Live Demo (resize your web browser): http://jsfiddle.net/LDeqe/embedded/result/
    Source: http://jsfiddle.net/LDeqe/
  4. #3
  5. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,688
    Rep Power
    171
    Originally Posted by leev18
    See:
    - http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    - http://css-tricks.com/css-media-queries/

    They works by using the "@media screen". They are added in CSS files, or in separated CSS files.

    examples:
    Code:
    @media screen and (max-width: 640px){
    
    <-- add any css code here -->
    
    example: body { background-color: black; }
    
    <-- add any css code here -->
    
    }
    Everytime the web browser resizes below 640px in width, the "@media screen" code will execute. It doesn't work in IE8 and below versions though. IE8 is an old and sucky browser now anyway.

    Live Demo (resize your web browser): http://jsfiddle.net/LDeqe/embedded/result/
    Source: http://jsfiddle.net/LDeqe/
    Yo man;
    Thank you for this, good start. 1 thing I couldn't find is the "font" responsiveness. If you look at sample site I provided above you can see their logo shrinks if you manually resize Firefox (or any browser).
    Would you please write a few lines on that?
    Thank uou
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    14
    Rep Power
    0
    Originally Posted by zxcvbnm
    Yo man;
    Thank you for this, good start. 1 thing I couldn't find is the "font" responsiveness. If you look at sample site I provided above you can see their logo shrinks if you manually resize Firefox (or any browser).
    Would you please write a few lines on that?
    Thank uou
    here's a sample, resize your web browser (DEMO: http://jsfiddle.net/hMvsS/embedded/result/):
    Code:
    <!DOCTYPE html>
    <head>
    
    <style>
    #title {
    	font-weigh: bold;
    	font-size: 75pt;
    	text-align: center;
    }
    #image {
    	text-align: center;
    }
    
    
    @media screen and (max-width: 1000px){
    	#title {
    		font-size: 60pt;
    	}
    	#image img { 
    		width: 800px;
    	}
    }
    
    @media screen and (max-width: 800px){
    	#title {
    		font-size: 45pt;
    	}
    	#image img { 
    		width: 600px;
    	}
    }
    
    @media screen and (max-width: 600px){
    	#title {
    		font-size: 30pt;
    	}
    	#image img { 
    		width: 400px;
    	}
    }
    
    @media screen and (max-width: 400px){
    	#title {
    		font-size: 15pt;
    	}
    	#image img { 
    		width: 200px;
    	}
    }
    </style>
     
    </head>
     
    <body>
    
    <div id="title">
    	Clannad
    </div>
    
    <div id="image">
    	<img src="http://i298.photobucket.com/albums/mm244/hikari2eden/ClanNaD/Clannad-OST-Cover.jpg" />
    </div>
     
    </body>
  8. #5
  9. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,688
    Rep Power
    171
    Thank you for your posts. I see the possibilities with this. But I believe it would be a better idea to use Jquery mobile. What do you think? I might be totally wrong as I am very new to this.
  10. #6
  11. No Profile Picture
    Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Location
    USA
    Posts
    16
    Rep Power
    0

    hi


    There are three parts to this kind: a flexible grid, flexible images and media queries.you need to give the measurements in percent, not pixels.This is where flexible and responsive web design starts from
  12. #7
  13. No Profile Picture
    Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    19
    Rep Power
    0
    Thanks for sharing this information. I found CSS tricks useful to layout of webpages accurately in all browsers. I also faced the problem and want to know the suitable answer which i found here.

IMN logo majestic logo threadwatch logo seochat tools logo