How to implement responsive web design and its bes

问题:

I have a website which uses pixel to render the pages. But when i view the website in different devices having different screen resolution the whole page will not fit into screen and if i use percentage, the page content will get squeezed.

Is the responsive web design is the right choice to design the web page. If so, I have got few concerns.

1. What is the risk involved in converting existing web site to incorporate responsive design.
2. Is there any framework available to do this and which is the best one
3. How it is supported across devices and browsers

回答1:

Using media queries will adapt a different css for different screen sizes. The way it works is telling the browser: if screenwidth = 700px or smaller/bigger; use mobile css. If screenwidth = 1000px or smaller/bigger; use desktop css. There's no limit to how many media queries you can use.

Using percentages is also a possibility; fluid design. I'd suggest using this together with media queries though.

As for frameworks, there are many out there. Bootstrap is one of the more populair ones. I personally believe working mobile first is the best way to go though. However, there is still heated debate on this subject.

As Pete mentioned in a comment earlier; working with graceful degredation (desktop first) will make the device download as much as the desktop site but not make use of the content downloaded. Wich is a huge drawback for the user. (Bigger pageload times, lots of server requests, more use of MB data etc.) Hence why I think progressive enhancement (mobile first) is the way to go.

Using progressive enhancement, the browser will always download the mobile css first; cutting down pageload times extremely.

For browser support info on responsive design, check this link.

回答2:

Read up on media queries to change css according to browser width or height.

Include viewport to make your webpages on mobile devices scale correctly.

回答3:

Look below a typical responsive head of html:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta charset="utf-8">
<meta name="description" content="How to make android app">
<meta name="author" content="Animesh Shrivastav">
<title>Make-Website</title>
<link rel="stylesheet" href="../css/my.css">

and a typical responsive css

html {
    margin: 0;
    padding: 0;
}

body {
    font-size: 1em;
    font-family: sans-serif;
    margin-left: 20%;
    width: 78%;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    width: 20%;
    min-height: 1500px;
    color: rgba(255,255,255,0.5);
    background-color: #34495e;
}

Now understand yourself.

If you can't understand, then check out my website below: writing responsive website in text editor like notepad