用百分比浮动就行了，代码如下lt！DOCTYPE html lthtml lthead ltmeta；首先在写页面的时候就要为响应式网页做准备，宽使用百分百，不设置固定高度设置meta 进行适应移动端页面了解pc 端主流显示器分辨率，设置显示断点，例如1920 * 1080 通过媒体查询设置 1920 宽度的显示方式，1600*1200，设置；由于媒介查询的方法，并不适应低版本的浏览器，需要加入JS去帮助兼容，以下JS可上网下载需要注意点是此JS一般需要跟网站的indexhtml放在同一个目录下，不适合分开管理，否则无法加载图片或者样式。

指的是 HTML5 HTML5本身是由W3C推荐出来的，它的开发是通过谷歌苹果，诺基亚中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术换句话说，每一个公开的标准都可以根据W3C的资料库找寻；1响应式网页结构 首先，我们先来看下上面案例展示的html结构，如下图所示可以说这是一个很典型的博客模版结构一个wrapper容器包含了头部内容侧栏底部2Meta标签 其次就需要我们针对移动设备加入这个meta标签；响应式布局最简单的就是用css3来实现我举一个最简单的例子下面是html代码lt！DOCTYPE html lthtml lang=quotenquot lthead ltmeta charset=quotUTF8quot ltmeta name =quotviewportquot content=quotwidth = devicewidth，initial。

如何做一个响应式的网页响应式网页根据不同用户的访问设备，呈现不同的页面风格比如PC端的页面大小，不利于用户在移动端的浏览为了满足不同的设备屏幕，可以准备适合PC和移动终端的两套页面服务器判断访问设备的类型。

请点击输入图片描述 meta头部设置参数，根据设备分辨率让浏览器的可视宽度来适应请点击输入图片描述 进入html框架部分，多版本元素一致情况下，按照其中一个版本添加html的Dom元素即可若有差异的话，也要在对应的位置，添加；如何用css实现响应式全屏布局呢满屏大图是当前比较流行的一种网页形式，本文将使用css的backgroundsize属性，教您如何简单实现该效果核心概念使用backgroundsize 属性，填充整个viewport当css属性backgroundsize 值为cover时。

用 aAnchor，简写为 a来实现网页间的跳转 a 需要一个 href 属性 指向跳转的目的地 同时，它还应有内容 例如浏览器将显示文本 this links to freecodecamporg，这是一个可点击的链接 通过这个；方法1使用已有的响应式网页框架，如bootstrap方法2a声明页面viewport标签响应式页面的前提条件 lt！device指设备，initialscale指打开的缩放比例，userscalable指用户是否可以缩放ltmeta name=quotviewportquot content；由于媒体查询的方法，不适合较低版本的浏览器，所以需要JS帮助兼容以下JS可以在线下载需要注意的是，这个JS一般需要和网站的indexhtml放在同一个目录下，不适合单独管理，否则无法加载图片或者样式请点击进入图片说明自。

首先需要考虑是全平台适配还是只是移动端适配这里以移动端响应式网站为例，讲述如何制作响应式网页#xF4CF选定基本设计尺寸选定基本设计尺寸，一般以1080为基准确定响应式web设计的应用场景之后，和美工或设计师沟通，之前，一般需要美工出几；1先在head里面设置Viewport ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10quot用户可以通过平移和缩放来看网页的不同部分2很多响应式都基于网格视图设计 响应式网格视图通常是 12 列，宽度为10；按图中步骤1，2，3可以放html代码的，所以需要先写好一个响应式的html页面，然后发把代码放到里面去就可以显示了。