HTML5怎么制作响应式网页

 我来答
厦门言成
2018-07-23 · TA获得超过4947个赞
知道小有建树答主
回答量:121
采纳率:97%
帮助的人:134万
展开全部

1.调整视口

代码实例:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>布局之路-移动端开发实例</title>
    <meta name="viewport" content="width=device-width,user-scalable = no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

代码解析:由于使用不同设备打开网页时,宽度均有所不同,所以不能讲视口设置为固定值,应当为width=device-width,即将视口设置为当前设备的宽度。

2.确定设计图的最小字体

浏览器(部分)能够显示的最小字体未12px,当移动端页面宽度为320px时,要保证最小字体为12px,那么在1080px的设计图中,最小字体应当为42px。

代码实例:

    <style type="text/css">
        html {
            font-size: 42px;
        }
    </style>

3.浮动布局

各个区块都是浮动的,不是固定不变的。为了能自适应各个窗口。

代码实例:

.main {
  float: left;
  width: 70%;
}
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

float浮动的好处就是,如果宽度不够放置下这个元素,元素会自动滚动到下方。

4.通过媒介查询,为不同设备加载相应样式

有条件应用样式:

 <style>
    @media all and(min-width:500px){ ... }
    @media (orientation){ ... }
</style>

代码解析:

第一行媒体查询代码指的是:为宽度大于等于500px的设备设置样式。

第二行媒体查询代码指的是:为纵屏状态(可见区域大于或等于宽度)下的移动端设备设置样式。

有条件的加载样式表:

<head>
    <link rel="stylesheet" href="wide.css" media="screen and(min-width:1024)" />
    <link rel="stylesheet" href="mobile.css" media="screen and(max-width:320)" />
</head>

代码解析:

第一行媒体查询代码指的是:为宽度大于等于1024px的设备,加载wide.css文件。

第二行媒体查询代码指的是:为宽度小于等于320px的设备,加载mobile.css文件。

5.使用百分比和rem替换px

除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。

代码效果对比:

/*使用固定像素*/
.box {
    float: left;
    width: 658px;
    font-size: 72px;
    text-align: center;
    line-height: 195px;
}
/*使用百分比和rem*/
.box {
    float: left;
    width: 60.93%;
    font-size: 1.71rem;
    text-align: center;
    line-height: 4.64rem;
}

代码解析:

  • 水平方向的值,将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。

  • 例如,父级宽度为1080px, 子级元素为197px,那么子元素转换为百分比为:197/1080*100%=18.24%。需要注意的是百分比根据父级计算,当标签结构级别不同时,计算公式中的“分母”也有所不同,在开发时这个地方很容易出现问题,请务必注意。

  • 垂直方向的值,将具体像素调整为rem,与水平方向相比,垂直方向的计算就比较简单。例如,行高为195px,HTML标签当前的字体大小为42px,将行高转换为rem单位,即195/42= 4. 64rem。

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式