整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，我是吉礻羊。
有人@我说不知道怎么写自适应的网页，今天就先不写优化的了，我把写自适应网页的方法说下。
自适应的网页
工具：dw网页设计软件；ps图像处理软件。
方法/步骤：
1，在<head></head>之间加入加入一行viewport标签。
<meta name="viewport" content="width=device-width,initial-scale=1" />
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
由于大家使用的电脑分辨率不一样，大小也不一样，所以网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素，对图像来说也是这样。
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%;
或者
width:auto;
2，字体也不能使用绝对大小（px），而只能使用相对大小（em）。
例如：
body {font: normal 100% Helvetica, Arial,sans-serif;}
上面的代码指定，字体大小是页面默认大小的100%，即14像素。
3，"自适应网页"的实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0" />
<title></title>
<style>
body {
height: 800px;
}
.header {
width: 100%;
height: 15%;
background-color: aquamarine;
}
.leftside {
width: 20%;
height: 75%;
background-color: skyblue;
float: left;
}
.main {
float: right;
width: 80%;
height: 75%;
background-color: steelblue;
}
.footer {
clear: both;
width: 100%;
height: 10%;
background-color: darkgray;
}
</style>
</head>
<body >
<div class="header"></div>
<div class="leftside"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
如今人们经过手机阅读网页占了大多数，随着阅读方式的改动，网页完成多终端自适应，无论关于防止工程师无谓的反复劳动或者是项目管理的便利性上来说重要性都是非常巨大的。
由于挪动设备越来越多的被人们运用，手机成为访问互联网的最常见终端，而我们设计的网页确是为了呈如今PC端。
手机的屏幕比拟小，宽度通常在600像素以下，而PC的屏幕宽度，普通都在1000像素以上（目前主流宽度是1366×768），有的还到达了2000像素。同样的内容，要在大小悬殊的屏幕上，都呈现出称心的效果，并不是一件容易的事。
很多网站的处理办法，是为不同的设备提供不同的网页，比方特地提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比拟费事，同时要维护好几个版本，而且假如一个网站有多个portal（入口），会大大增加架构设计的复杂度。
自适应是为了解决如何在不同大小的设备上呈现同样的网页。
如何进行自适应网页设计
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。
要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。
流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载a.css文件。
link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"
如果屏幕宽度在400像素到600像素之间，则加载b.css文件。
自适应与响应式的区别
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小。但是无论怎样，他们主体的内容和布局是没有变的。
自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。
响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。
相比自适应网站，响应式网站省去了很多的控件，同时也省去了不少建立和维护的功夫。响应式布局就是一种流体，在按百分比缩放时也能相当的流畅。
使用响应式设计，你要记住所以的布局。这当然可能会使过程混乱，并且使设计更加复杂。这就意味着你应该专注于中等分辨率的视图，然后再用media querie调整为更低或更高的分辨率。 所以通常的做法是，在一个新的项目中使用响应式设计，在后期的改造中使用自适应设计。
自适应可用于改造现有的网站使其更好地适应移动端。这使你的设计可控制和开发多个特定的视图。你开发视图的数量完全取决于你，你的公司和全面的预算。然而，它也提供了一定量的控件（例如在内容和布局上），如此你便无须使用响应式设计。但当你设计多种分辨率时你会发现，在改变窗口大小的时候将会“跳出”布局。
自适应网站可以用于设计和开发一个拥有多个自适应视图的网站。所以这种设计通常用于改造网站。
前，昆明网站建设公司用自适应技术帮助客户制作网站已成为一种规范标准，为何自适应网站设计成为企业建站的首选，因为自适应网页设计方式会自动检测屏幕大小以载入合适的布局，当你在电脑或手机浏览网页，网站会自动地检测和选择蕞佳的屏幕布局。
只需在HTML的<head>标签中插入一个<meta>标签，<meta>标签中可以设置具体的宽度(如像素值)或者缩放比例2.0(设备实际尺寸的两倍)，下面是将一个页面放大到设备实际尺寸两倍显示的meta标签示例:
<meta name=”viewport” content=”initial-scale=2.0,width=device-width,user-scalable=yes”/>
如果不允许调整页面大小，那么把user-scalable=yes改为user-scalable=no，如：
<meta name=”viewport” content=”initial-scale=2.0,width=device-width,user-scalable=no”/>
CSS引用以下代码来控制屏幕输出的效果
@media screen and (max-width:1600px) {
}
自适应网页必须与多个终端设备显示结合在一起，所以需要装载几组css代码，网站打开的速度略比非自适应网站要慢一点，当然如果解决得好，这一慢的速度可以忽略。
所以在做自适应网站的时候一定要注意速度，减少编码，配备更强的服务器。
对于一些新手网页设计者在设计网站页面，由于缺乏经验，设计风格过于独特，连到移动端的情况下就会出现无法写出及兼容问题，所用色彩及布局，尽量使用扁平化风格试，不仅加载速度，修改也比较简单方便。
因此，在设计时，必须要充分考虑多终端设备需融合的实际效果，网站页面设计师除了会做平面图，也要掌握部分前端开发，才能做出符合标准的自适应网站。
自适应网站普遍会存在一个问题就是兼容性，我们必须对网站进行多个屏幕尺寸大小测试，并通过各种浏览器进行检测，一般使用IE游览、Firefox浏览器、Google这三个浏览器测试，因为其他浏览器大部分都用他们的核心，用这三个浏览器看有没有兼容存在bug。
自适应网页如何设计_云南才力网站建设公司
*请认真填写需求信息，我们会在24小时内与您取得联系。
