自适应网页设计

1.静态布局（Static Layout）即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置； 对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。2、弹性布局弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：flex-flow: <flex-direction> || <flex-wrap>flex-direction: row（初始值） | row-reverse | column | column-reverseflex-wrap: nowrap（初始值） | wrap | wrap-reverseflex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。两者结合起来即flex-flow属性就确定了弹性容器在main axis和cross axis两个方向上的显示方式，下面的例子很直观的说明了各个属性值的区别：3、自适应布局（Adaptive Layout）自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。 你可以把自适应布局看作是静态布局的一个系列。 就是说你看到的页面，里面元素的位置会变化而大小不会变化；4、流式布局（Liquid Layout）流式布局（Liquid）的特点（也叫”Fluid”) 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。 你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。5、响应式布局（Responsive Layout）做手机网站必加的一句头部(head)代码12345<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,  user-scalable=no">name="viewport"   名称=视图width=device-width 页面宽度=设备宽度(可以理解为获取你手机的屏幕宽度)initial-scale - 初始的缩放比例  minimum-scale - 允许用户缩放到的最小比例   maximum-scale - 允许用户缩放到的最大比例  user-scalable - 用户是否可以手动缩放  分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。 可以把响应式布局看作是流式布局和自适应布局设计理念的融合。 每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在Bigtree看来，比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——将大部分列宽用固定值设置死，留下一列不设置宽度，将table的宽度设置为屏幕的百分比（譬如95%、98%等）。例：<tablewidth="95%"border="1" cellpadding="2" cellspacing="1"<tr<td width="50px" nowrap序号</td<td width="150px" nowrap分类A</td<td width="150px" nowrap分类B</td<td width="200px" nowrap名称</td<td nowrap说明</td<td width="100px" nowrap操作</td</tr……</table在本例中，名为“说明”的列，内容比较长，个人认为可以将此列设置为浮动宽度列，用以自适应页面的宽度。解决此问题的方法是：在明细行的td中，追加style="word-wrap:break-word;"，这样做可以使半角连续字符强制换行，不至于撑破列宽。例：<td align="left" width="150px"style="word-wrap:break-word;"……</td解决此问题的方法是：在定义表格时，追加style="table-layout:fixed;"，这样做可以使半角连续字符强制换行，不至于撑破列宽。需要注意的是，使用此参数后，不要轻易在tr(行)或td(列)中加入height属性，会使table不再被内容撑出适合的高度。例：<table width="95%" border="1" cellpadding="2" cellspacing="1"style="table-layout:fixed;"……</table此方法适用于IE与FireFox浏览器。

你好怎样让bootstrap设计的页面不仅在电脑浏览器是响应式在手机端也是响应式呢？也就是电脑端不同分辨率下的浏览效果跟相应分辨率下的手机端浏览效果是一样的呢？闲话少说，直接上图看效果：在用bootstrap设计好页面,并在火狐浏览器上进行调试,效果图如下：但是在手机端浏览的时候发现整个页面被缩小的很小,连文字都看不清：为什么会这样呢？为什么bootstrap设计出来的页面样式虽然都一样,但是在手机端显示的只是整个页面都缩小而不是响应式的呢？后来才发现凡是bootstrap设计的页面都带有标签头:<meta name="viewport" content="width=device-width, initial-scale=1">只要每个页面都加上这样的标签头,电脑端和手机端的效果就会保持一致，加了标签头满意请采纳

方法一：按住ctrl键然后在滑动鼠标，向下滑是缩小，向上滑是放大。方法二：点击浏览器的“页面缩放”，在移动到相应的比例就好。方法三：浏览器现在设置里都有一个选项是适应屏幕。点击适应屏幕即可自动适应当前页面大小。

可以用jQuery控制// 获取窗口的高度var win_h = $(window).height();$(".xx").height(win_h);// 窗口变化事改变高度$(window).resize(function(event) { // 获取窗口的高度 var win_h = $(window).height(); $(".xx").height(win_h);}

1024*768 1280*720 1366*768 1440*960 这几个是最常见的分辨率，做网页的时候要考虑

　　这位网友你好，想要网页宽度自适应，你需要把网页元素宽度设置为百分比，还要在网页头部加上代码：1<meta name="viewport" content="width=device-width,initial-scale=1.0" />　　图片自适应，且不超过原始大小，需要设置最大宽度，代码如下：1234img{  width:100%;  max-width:100%;}我就是怎么做的，可是图片还是依据body的宽度的100% 代码能发一下吗？贴出来看看。 算了，自己解决了 应该是 width: auto; max-width:100% 原来如此~

1：Meta 标签为了适应屏幕，不少移动浏览器都会把HTML页面置于较大视口宽度（一般会大于屏幕宽度），你可以使用viewport meta标签来设定。以下viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放：<meta name="viewport" content="width=device-width, initial-scale=1.0">2： Media QueriesCSS3 media query是自适应网页设计的关键，他就像高级语言里的if条件语句，告诉浏览器根据不同的视口宽度（这里等于浏览器宽度）来渲染网页。如果视口宽度小于等于980px，下面规则生效。这里将容器像素宽度该用百分比，页面排版更加灵活。<style type="text/css"> @media screen and (max-width:980px){ #t1{width:100%} .t2{width:60%} } </style> 注意：要将px改成百分比 #代表id的样式引用 .代表class的样式引用

　　网站自适应优点如下：　　　　1、更少维护　　　　开发一个独立的移动网站，会增加你的工作负担。实际上你就拥有了两个独立网站。如果你有一个响应式网站，维护的成本将会很小，因为它只有一个布局，且可工作在所有类型的设备上，而这可以明显地减少你的工作量。　　　　2、积累分享　　　　响应式网站设计可以让你(作为网站的拥有者)通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。　　　　3、用户友好　　　　响应式的网站设计能够对用户产生友好度，并且对于不同的分辨率能够灵活的进行操作应用。同时还可以进行收集分享，我们可以通过网站中这些单一的网站URL地址把那些社交分享链接收集起来。　　　　缺点如下：　　　　1、时间花费　　　　开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时。如果你想要一个响应式网站，最好从草图开始重新设计。　　　　2、优化难　　　　对于响应式Web设计，为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户，移动用户多采用不同的关键字，修改标题及其他事项都比较困难。　　　　3、布局不好控制　　　　响应式Web设计的布局主要是液态的，这也正是设计者对设计样式不好控制的原因。而且眼下正是设计者提前展示各种“复制品”的时候。设计者试图针对移动和桌面布局分别显示线框和设计原型。只有等到这两种布局均得到提高后，响应式Web设计策略才能真正实现。　　　　随着移动设备的发展，越来越多的网页开始采用自适应网页设计技术，极大的提高了网页的用户体验，因此对seo起到催进作用，那么自适应网页设计技术对seo的促进作用主要表现在如下几个方面。　　　　1、由于采用自适应网页设计技术，网页显示效果更好，极大的提供了网页的显示效果，提高了用户浏览效果，进而提高了用户体验，我们做seo的目的就是提高用户体验，因此催进了seo的效果，提高了网站关键词的排名。　　　　2、过去需要几个页面解决的问题，现在一个页面就可以解决，提高了seo的整洁程度，减少了seo页面的代码冗余。　　　　3、可以减少重复内容，有利于seo关键词的排名。　　　　4、有利于搜索引擎识别，抓取，索引，网站质量的判断等。　　　　综上所述采用自适应网页设计技术对seo还是有很多催进作用的，至少没有什么副作用，如何是新建网站或者是网站改版，还是尽量采用自适应网页设计技术对seo还是有一定作用的。　　　　应用响应式网页设计，可以使我们不必针对具体设备或屏幕编写单独的网页，不需另建单独的网址，一个页面适用于所有的设备，即自适应功能。蓝迈通联做响应式网页时，可以自动识别屏幕宽度、并做出相应调整的网页。如今，这种响应式网站设计已经成为时代的潮流了。希望对你有帮助。