8

我有一个使用像素来呈现页面的网站。但是当我在不同的设备上查看具有不同屏幕分辨率的网站时，整个页面将不适合屏幕，如果我使用百分比，页面内容会被挤压。

是响应式网页设计是设计网页的正确选择。如果是这样，我几乎没有什么顾虑。

  1. 将现有网站转换为包含响应式设计的风险是什么。
  2. 是否有任何框架可以做到这一点，哪个是最好的
  3. 如何跨设备和浏览器支持它
4

3 回答 3

9

使用媒体查询将为不同的屏幕尺寸调整不同的 css。它的工作方式是告诉浏览器： if screenwidth = 700px 或更小/更大；使用移动CSS。如果屏幕宽度 = 1000 像素或更小/更大；使用桌面CSS。您可以使用多少媒体查询没有限制。

也可以使用百分比；流体设计。不过，我建议将其与媒体查询一起使用。

至于框架，那里有很多。Bootstrap是比较流行的一种。我个人认为，首先使用移动设备是最好的方法。然而，关于这个问题仍然存在激烈的争论。

正如皮特在前面的评论中提到的那样；使用优雅的降级（桌面优先）将使设备下载与桌面站点一样多，但不会使用下载的内容。这对用户来说是一个巨大的缺点。（更大的页面加载时间、大量服务器请求、更多使用 MB 数据等）因此我认为渐进增强（移动优先）是可行的方法。

使用渐进增强，浏览器将始终先下载移动 CSS；极大地减少页面加载时间。

有关响应式设计的浏览器支持信息，请查看此链接。

于 2013-06-07T13:13:24.947 回答
2

阅读媒体查询以根据浏览器宽度或高度更改 css。

包括视口以使您的网页在移动设备上正确缩放。

于 2013-06-06T11:41:57.923 回答
-4

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

于 2017-11-05T10:15:42.447 回答