零基础建站培训介绍

当前位置:

自适应网页制作方法

自适应网页制作方法最先想到的是css3的媒体查询 media-screen 控制在不同尺寸下显示。这里说个题外话,css中的像素单位px,是逻辑像素。不是设备的实际像素。但是,这个临界值并不好设置。

那就用js实现吧,js可以根据navigator.userAgent来识别浏览器。

做法:通过js控制显示的最外层的div(body的子元素):


<body>
<div id="container-pc">
<!--PC端内容-->
</div>
<div id="container-mobile">
<!--移动端内容-->
</div>
</body>
(function () {
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
var containerPC = document.getElementById('container-pc');
var containerMobile = document.getElementById('container-mobile');
getRem();
addEvent();
function getRem() {
if (isMobile) {
containerPC.innerHTML = '';
var bodyWidth = document.body.offsetWidth;
//chrome最小字体的限制,放大100倍。保证根节点大于12px
document.documentElement.style.fontSize = (bodyWidth / 768)*100 + 'px' ;
window.onresize = function () {
getRem();
};
} else {//PC


containerMobile.innerHTML = '';
}
}
})()

PC端网页设计有最大宽度(比如1920px),还有个内容区域宽度(一般在960px-1200px的范围内)
移动端网页是一个自适应的网页,设计一般给一张宽750px的设计图,需要我们将这个设计图100%显示,在不同设备上进行缩放,固定的px单位无法满足,那就要用到rem这个单位。通过对html节点设置fong-size大小,局部大小就由这个基准决定。我们的设计图宽度是768px,在js代码里有体现,上面代码的第12行:


document.documentElement.style.fontSize = (bodyWidth / 768)*100 + 'px' ;

由于chrome最小字体的限制,根节点html的font-size不能小于12px,所以我们浏览器宽度跟设计图的宽度比放大100倍。写css的时候,设计图标注的宽度要缩小100.比如一个区域设计标注230px*150px,那在css里就是:


width:2.30rem;
height:1.50rem;

问题:
这样做,PC,移动端显示没有问题,但是在移动端打开,会加载pc端的资源,如图片,因为即使display:none,里面的img标签的图片也会被加载。但是也仅仅是加载<img>里的图片,不会加载background-image的图片,还可以接受。

移动端因为是自适应的网页,所以窗口缩放都要重新计算rem的基准。pc端可以用鼠标拖动缩放浏览器窗口,但是很少见到能缩放的移动端。所以这个计算好像也没那个必要。

对于网页中的mp4文件,如果在<video>中,在国产安卓浏览器播放会浮到最上层,这个做法是做个播放弹窗。<video>资源会默认进入页面加载,导致页面非常慢。可以加个封面,再设置为不预加载。


<video poster="封面图片的地址" preload="none"></video>

相关阅读:

CSS3自适应布局与Media Queries

如何制作自适应手机网站

上一课: 下一课:

发表评论

电子邮件地址不会被公开。 必填项已用*标注