html百分比自适应代码

1. 自适应代码怎么写

自适应代码怎么写

1.电脑网页自适应宽度代码怎么写,可以让网页在不同分辨率的电脑上都

响应式要用CSS里的媒体查询单独来写首先要了解一下基本的媒体查询的意思：

/* 小屏幕（平板，大于等于 768px）媒体查询的写法 */

@media (min-width: @screen-sm-min) { 。 }

/* 中等屏幕（桌面显示器，大于等于 992px）媒体查询的写法 */

@media (min-width: @screen-md-min) { 。 }

/* 大屏幕（大桌面显示器，大于等于 1200px）媒体查询的写法 */

@media (min-width: @screen-lg-min) { 。 }

/*我们偶尔也会在媒体查询代码中包含 max-width

从而将 CSS 的影响限制在更小范围的屏幕大小之内。*/

@media (max-width: @screen-xs-max) { 。 }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { 。 }

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { 。 }

@media (min-width: @screen-lg-min) { 。 }上述功能了解之后，只要把想要实现的分辨率效果写在不同的媒体查询里即可

2.如何编写自适应网页

工具/原料

dm网页设计软件

ps图像处理软件

方法/步骤

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

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。对图像来说也是这样。

具体说，CSS代码不能指定像素宽度：

width:xxx px;

只能指定百分比宽度：

width: xx%;

或者

width:auto;

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

例如：

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

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

流动布局（fluid grid）

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

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

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

"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。

它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。

3.html自适应布局,怎么写,求啊,在线等

</div>

</div>

CSS:

.all{width:100%;height:500px; margin:auto}

.boxall{ width:500px; height:500px; float:left}

.box3{margin-left:500px;height:500px}

在box3里面再写内容，宽度设为100%，内容就是自适应了，

4.Dreamweaver中响应式网页代码如何写

默认一个固定宽度为980px的网页，当浏览器窗口比980px小的时候，这个布局就变为100%比宽度的液态布局，而不是固定宽度。

当浏览器窗口再缩小于700px的时候，我们就隐藏侧边栏。当窗口小于480px的时候，横向导航条隐藏，换成点击下拉效果的导航条。

如上图，从左至右依次为移动版本—>平板电脑—>桌面浏览器的效果。1、响应式网页结构首先，我们先来看下上面案例展示的html结构，如下图所示：可以说这是一个很典型的博客模版结构。

一个wrapper容器包含了头部、内容、侧栏、底部。2、Meta标签其次就需要我们针对移动设备加入这个meta标签。

告诉webkit内核浏览器初始缩放比例为1。（很多iOS和Android的浏览器都是基于webkit内核的） IE8或者更早的浏览器并不支持Media Query。

你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。如果你的网站页面中用了html5文档声明，用到了很多html5标签，但是这些标签在ie9以下版本是不支持的，所以我们必须引用一个html5.js文件使得这些标签被其它低版本浏览器确认。

3、媒介查询-Media Queries 在这里马海祥就不再详细的讲正常页面下的布局如何写了。在此主要讲解下媒体查询media queries这个css的设计思路。

这个是css3的属性，也是我们这个响应式网页设计的最重要的部分。可以说是响应式设计的核心。

它根据条件告诉浏览器如何为指定视图宽度渲染页面。下面我们用CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。

@media screen and (max-width: 480px) { 这里就是重新设定一些css的属性 } （1）、当浏览器视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

#pagwraper { width: 94%；}重新设定容器宽度为94%; #content { width: 65%; padding: 3% 4%；}重新设定内容宽度为65%; #sidebar { width: 30%；}重新设定侧边栏宽度为30% 注意这里我们用到了%，使得页面是一个流体布局。（2）、当浏览器视图宽度为小于等于700像素时，视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。

#content { width: auto;float: none;margin: 20px 0;} #sidebar { display:none; width: 100%; margin: 0; float: none； } 容器宽度继承了上面94%的宽度，这个时候我们设定内容宽度为自动，使其填满外部的wraper容器。并清除其浮动样式。

这个时候的浏览的页面，可以权衡下右边侧栏的重要程度，如果觉得有必要继续在页面中显示，我们可以清除其浮动，并把宽度也设为100%，这样就在content这个容器下显示。但马海祥觉的一般情况下，在这么小的浏览窗口中，用户只想看到最主要的内容，右边侧栏成为了一个补助模块，那么可以直接把它隐藏掉。

这样可以减少页面的高度。（3）、当浏览器窗口小于等于480px的时候，一般这个就是iPhone的横向宽度。

就要将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。首先我们设计webkit内核浏览器下禁用文字大小调整，代码如下：html { -webkit-text-size-adjust: none； } 其次就是代码的转换了，如下图所示：其实在480px宽度下的时候，整体框架布局已经不用设置，马海祥认为我们应该考虑得更多的是怎么把一个良好的页面布局展示给用户。

而在这个模式下，如果导航条有很多选项的时候，就会相互堆叠换行，那么这里我们设计成点击出下拉菜单形式，如下图所示：这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示，所以这里我们重新设定下header的高度，能完整呈现出这个站点logo就可以了。在480px小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。

5.自适应手机屏幕代码

自适应手机屏幕代码：

name="viewport" content="width=device-width, initial-scale=1.0,

minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

首先就是自适应（说白了就是用百分比来设宽度），最外框肯定是用百分比的，但是一些小的部分就不能用百分比了，不然就会变形，就比如你说的图片，图片尽量定死了，不然不同的手机屏幕大小不一定，所显示的就不一样，甚至会变形了。你可以通过控制图片外面的DIV来控制位置，让它在符合美学的位置。

扩展资料：

CSS+DIV网站设计的问题

尽管CSS+DIV具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在：

第一，对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table）,CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。

第二，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

第三，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox

）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在）。CSS+DIV还有待于各个浏览器厂商的进一步支持。

第四，CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。

参考资料：百度百科.代码

自适应代码怎么写