html固定宽度改为响应式布局需要怎么做

2021-01-14 07:41:45 字数 3064 阅读 6950

1楼:贴了一粑粑

不要用固定宽度属性来描述元素,改用百分比,这样元素的宽度就是父元素的百分比,这是响应式布局最基本的技巧。

采用响应式布局,需要注意以下几点:第一,用百分比给元素设定大小;第二,不要对元素进行绝对定位;第三,写css时用上@media**查询技巧。bootstrap是响应式布局做得不错的前端开发工具,有兴趣可以学习一下。

随着终端屏幕尺寸的种类越来越多,如果针对每一种尺寸都独立开发一个页面的话,这样的开发成本将会变得非常高,响应式布局就成了解决这一问题的有效途径。当然,深层次的响应式布局应该是贯穿前端和服务端的。

2楼:匿名用户

把像素px 改为%单位

比如div

3楼:匿名用户

media query属性

4楼:我爱我的肥羊

使用%代替固定尺寸,需要使用到滚动尺寸的话就用js控制

5楼:量子妖精

百分比+css **查询

6楼:南哩莂

用百分比代替实际尺寸

静态、自适应、流式、响应式四种网页布局有什么区别?

7楼:宝贝lj爱你

1、灵活性不同:

静态布局:毫无灵活性可言,目前已逐渐被淘汰。

自适应布局:静态布局的升级版,因其强大的灵活性,已逐渐成为高端网页的代名词。

流式布局:灵活性更高,可适用于其他三种**布局。

响应式布局:自适应布局的升级版,响应式**要普遍适应市面上各类屏幕,开发难度和工作量都是非常大的,开发**自然比普通**高。

2、设计方法不同:

静态布局:居中布局,所有样式使用绝对宽度/高度(px),设计一个layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分。

自适应布局:使用 @media **查询给不同尺寸和介质的设备切换不同的样式。

流式布局:使用百分比定义宽度,高度大都是用px来固定,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。

响应式布局:**查询+流式布局。使用@media**查询和网格系统配合相对布局单位进行布局,就是综合响应式、流动等上述技术通过 css 给单一网页不同设备返回不同样式的技术统称。

8楼:楚轩的眼镜

静态布局(static layout)

即传统web设计,对于pc设计一个layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;

对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。

自适应布局(adaptive layout)

自适应布局(adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。

你可以把自适应布局看作是静态布局的一个系列。

流式布局(liquid layout)

流式布局(liquid)的特点(也叫"fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

响应式布局(responsive layout)

分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。

可以把响应式布局看作是流式布局和自适应布局设计理念的融合。

恩恩大概就是这样。

9楼:自由的人

响应式与自适应的原理是相似的,都是检测设备,根据不同的设备采用不同的css,而且css都是采用的百分比的,而不是固定的宽度,不同点是响应式的模板在不同的设备上看上去是不一样的,会随着设备的改变而改变展示样式,而自适应不会,所有的设备看起来都是一套的模板,不过是长度或者**变小了,不会根据设备采用不同的展示样式,流式就是采用了一些设置,当宽度大于多少时怎么展示,小于多少时怎么展示,而且展示的方式向水流一样,一部分一部分的加载,静态的就是采用固定宽度的了。

10楼:匿名用户

做好的html页面都是静态的

你所说的静态应该是固定值

静态:比如谷底固定好div的宽度和高度[偏向理解]自适应:也就是按照你的浏览器宽度自动缩小放大流式:

也就是div自行排列 比如[div 宽是100px 那么我浏览器宽是500px 我们可以排列5个div 如果浏览器宽是300px 那么div就会自动排列成2行 第一行是3个div 第二行是2个div]

响应式:借助css3中的media queries 响应**查询这个标签来达到判断分辨率大小来执行css中的样式**[早期做响应式的话 使用js来判断]

像这样**: ipbun.** 就是响应式的

响应式布局是怎么回事 只能用html5跟css3写**吗 能用html跟css写吗

11楼:匿名用户

响应式布局就是根据浏览器显示区域大小不同显示不同的样式,比如说你的浏览器是电脑1366*768就显示宽屏布局(如左右布局),如果是手机宽480px,就显示适用于手机的布局(如上下布局)。

响应式布局和一般是使用css3的@media属性,设置当浏览器宽度不同时就调用不同的css。

以前,一般都是使用js来判断浏览器是手机端还是pc端,是手机端的话就用手机端的css或整个页面跳转到专门的手机**,是pc端就使用pc端css。但是现在移动端更丰富了,手机屏幕大小不一,还有pad等介于中间的屏幕大小,所以就有了响应式布局这个更适用于移动互联网的概念产生。

12楼:匿名用户

响应式布局就是一个**能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。

响应式布局主要运用的是css3中的media query特性,在移动浏览器及现代高级浏览器中都有较好的支持,对于老版本的浏览器,使用html4.0+css2.1无法满足需求。

响应式布局是一种全新的概念,低版本浏览器不能原生支持。