html 响应式布局怎么做，HTML响应式布局

本文目录一览

1，HTML响应式布局
2，HTML 固定宽度改为响应式布局需要怎么做

1，HTML响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式

响应式布局就是网页会根据上网设备的屏幕大小而自我调整网页的布局。听着跟木有解释一样，我举个例子：你以全屏访问亚马逊网站，然后在慢慢缩小浏览器会发现有一些东西（专业点说是dom元素）不见了，这就是响应式设计的一种。目的就是更好的用户体验。但是响应式设计不是设置，不是说开发者点点鼠标就能完成的。从设计开始就要考虑电脑，手机等不同终端的访问，其底层是大量的css，js代码在控制着网页。然而亲目前连响应式设计的概念都不清楚，还是先从基本的html，css，js学起，等羽翼丰满之时再去设计响应式页面。

HTML响应式布局

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

左边div左浮动设置固定宽度，右边div margin-left设置左边div的宽度值，右边div不需要浮动

不要用固定宽bai度属性来描述元素，改用百分比，这样元素的宽度就是父元素的百分比，这是响应式布局最基本的技巧。　　采用响应式布局，需要注意以下几du点：第一，用百分比给元素设定大小zhi；第二，不要对元素进行绝对定位；第三，写css时用上@media媒体查询技巧。bootstrap是响应式布局做得不错的前端开发工具，有兴趣可以学习一下。　　随着终端屏幕尺寸的种dao类越来越多，如果针对每一种尺寸都独立开内发一个页面的话，这样的开发成本将会变得非常高，响应式布局就成了解决这一问题的有效途径。当然容，深层次的响应式布局应该是贯穿前端和服务端的。

把像素px 改为%单位比如div{ height: 100px; width: 20%;}

media query属性

百分比+css 媒体查询

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

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