搭建自适应网站（自适应网站设计）

“自适应网页设计”这个名词，指的是可以自动识别屏幕宽度，做出相应调整的网页设计。

简单来讲，自适应网站就是能够适应不同分辨率屏幕的网站，一站通行，不需要再为每一个不同屏幕大小的设备重新制作一个网站版本。

一、允许网页宽度自动调整

首先，在网页代码的头部，加入一行viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

<!--[if lt IE 9]>

<![endif]-->

以上标签只支持一种尺寸，正确的做法是用js动态生成下面标签，前提是要先获取屏幕尺寸。


var phoneWidth =  parseInt(window.screen.width);var phoneScale = phoneWidth/640;var ua = navigator.userAgent;if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.$1);if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }

二、CSS文件尾部增加针对不同屏幕分辨率的规则。

例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。CSS中的百分比中指的是相对于父元素的宽度。子元素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。body默认宽度是屏幕宽度（PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了。但这只适合布局简单的页面，复杂的页面实现很困难。

@media screen and (max-device-width: 480px) {

#divMain{

float: none;

width:auto;

}

#divSidebar {

display:none;

}

三、相对字体大小

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {

font: normal 100% Helvetica, Arial, sans-serif;

}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {

font-size: 1.5em;

}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small {

font-size: 0.875em;

}

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

四、流动布局（fluid grid）

"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {

float: right;

width: 70%;

}

.leftBar {

float: left;

width: 25%;

}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

另外，绝对定位（position: absolute）的使用，也要非常小心。

五、图片的自适应

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。这只要一行CSS代码：

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：

img { width: 100%; }

此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});

根据以上的步骤，可以简单的制作出一个自适应网站。

搭建自适应网站（自适应网站设计）相关推荐

HTML5期末大作业：茶页文化网站设计——气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript
HTML5期末大作业:茶页文化网站设计--气高端企业自适应响应式网站模板(6个页面) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 ...
TML5期末大作业：红色自适应网上鲜花网站设计——浪漫红色自适应网上鲜花店(16页) HTML+CSS+JavaScript 大学生鲜花网页作品植物网页设计作业模板学生网页制作源代码下载
HTML5期末大作业:红色自适应网上鲜花网站设计--浪漫红色自适应网上鲜花店(16页) HTML+CSS+JavaScript 大学生鲜花网页作品植物网页设计作业模板学生网页制作源代码下载常见网 ...
antd option宽度自适应_网站自适应模板是什么
新手经常会问:网站自适应模板是什么? 自适应模板就是"响应式布局",简单理解为:编辑好电脑版网站后,在手机.平板.其他设备上可以智能地根据用户行为以及使用的设备环境进行相对应的布局 ...
服务器端网站自适应,自适应网站与响应式网站的区别，SEO优化该怎么选择移动端...
4G网络越来越普及,移动端流量占比越来越大的今天,作为SEOer我们的关注点也逐渐向移动端转移,目前用的比较多的手机站架构方式就是响应式和自适应两种. 该选择那种建站方式架构手机站呢?有句话说的好:& ...
基于element的网站自适应方案（移动端适配）
一般而言,管理系统类的网站我们往往会按照PC的标准来设计,不会去考虑小屏幕的适配,甚至是移动端的适配,因为这种系统网站往往涉及到大量的列表查询页(表格列往往很多,列内容长短不一),详情页(信息展示量大 ...
2023最新苹果CMS10仿电影先生网站自适应源码/UI简约大气极速加载
正文: 仿电影先生网站自适应模板适用于苹果cmsV10模板,本套模板极简风格,极速加载,电脑手机多屏兼容能力强,布局美观,模板,无用户中心.无影片评论,详情功能请看演示站. 注意没有目标站的弹窗! 程 ...
HTML5左栏全屏自适应博客网站模板
简介: HTML5左栏全屏自适应博客网站模板是一款绿色左栏全屏自适应营销推广博客模板下载.aspku提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢. 下载地址: http://www.byt ...
[ dede织梦模板] [免费分享] 中英双语版自适应通用企业网站源码家具家居产品企业网站模板+手机版
标题中英双语版自适应通用企业网站dede织梦模板下载源码源码类型:响应式是否带手机版:带手机版下载链接 http://www.bytepan.com/wQn5WUpshg9 图片
首涂第十八套苹果CMSv10自适应热销资源网站专用多功能视频模板
简介: 首涂第十八套苹果CMSv10自适应热销资源网站专用多功能视频模板,适用于官方资源站类型的模板,非常简洁,喜欢的可以看看. 网盘下载地址: http://kekewl.cc/da28vH1Muj ...
苹果cms10好看的模板_简洁黑色自适应苹果CMSv10网站模板
苹果cms10好看的模板_简洁黑色自适应苹果CMSv10影视模板我的主题网[第十四套]苹果CMSv10最新原创酷黑渐变特色自适应视频站模板酷黑渐变特色功能触动封面直接播放视频内容,苹果cms自适应 ...

搭建自适应网站（自适应网站设计）

搭建自适应网站（自适应网站设计）相关推荐

最新文章

热门文章