html5怎么制作一个响应式网页？

HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配这里以移动端响应式网站为例，讲述如何制作响应式网页。

1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。

2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。

具体代码：

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

};

网页设计中响应式具体怎么实现？

响应式网页设计现在无疑是一件大事情。如果你还不了解响应式设计，可以看看我最近发表的响应式站点列表（译者注：可以好好看看示例中的网站在不同分辨率下的展现方式）。对新手来说，响应式设计可能有一点复杂，但是事实上比你想象的简单。为了帮助你迅速的了解响应式设计，我起草了一篇快速教程。你可以在3个步骤中学习到响应式设计和媒介查询（Media Queries）的基本原理（假定你了解基本的CSS知识）。

      第一步：Meta标签

大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。

第二步：HTML结构

      在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。

第三步：媒介查询-Media Queries

      CSS3 Media Query-媒介查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。

      当视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。

然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。

对于小于等于480像素（手机屏幕）的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。

你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。

做好的网页怎样简单快速的实现响应式？

首先在写页面的时候就要为响应式网页做准备，宽使用百分百，不设置固定高度。

设置meta 进行适应移动端页面。

了解pc 端主流显示器分辨率，设置显示断点，例如1920 * 1080 通过媒体查询设置 1920 宽度的显示方式，1600*1200，设置 1600宽度的显示方式，其实一般是1200 以上的都设置同一个显示方式就可以了，主要是显示器分辨率低的，例如 800 * 600 设置它的显示方式，

xs: 576px sn:≥576px md: ≥768px lg:≥992px xl:≥1200px xxl:≥1600px

一般需要通过媒体查询设置的pc端的范围有这些。

移动端的话一般不是通过媒体查询来设置， 先用 js 将单位设置为 rem, 即 1rem = 100px

这样则 默认字体为 0.16rem; 通过百分百宽度来设置盒子的宽，让它根据屏幕来做调整。

如果使用框架的话还可以结合 栅格系统来做响应式兼容。

其实移动端的兼容是最麻烦的，因为手机品牌种类多，系统一般分 安卓 和 ios ,但是还有系统版本，问题，不同系统版本也会有不一样的显示方式（特别是ios系统）。

安卓主要是品牌种类的不同，屏幕 分辨率的不同。

想要做基本的兼容就是先设置meta，然后将宽设置为 百分百比

网页中做到自适应的响应式页面有几种方法？

做响应式页面就两种方法：

一是通过各种技术写一套响应的代码，要用到的技术，如通过设置百分比宽，使用栅格系统，和通过媒体查询，弹性布局等结合来实现。这样写的好处了代码只需要写一套。但是这样写要做兼容各种移动端肯定会有各种各样的问题出现。

第二种方法是：写两套代码，pc端和移动端分开来写，然后再通过添加js获取屏幕的分辨率（或者通过获取用户设备来）来进行判断用户是在什么设备上打开，然后根据条件来打开页面

这样做的好处是两套代码分开来，维护方便，移动端页面也不会受pc端布局影响，开发灵活。

但是这样的话需要写一个判断页面然后使用两个2级域名，分别对应移动端和pc端。

响应式网页的设计策略有哪些?

移动设备的设计首先要适应大屏幕的视觉效果，其次要逐步提升移动设备的视觉效果。移动先行策略可以减少大量不必要的CSS代码，有利于提高响应式web的开发效率，更好地满足用户的需求。

响应式网页的设计策略一般采用媒体查询技术，设置了小屏幕、中屏幕和大屏幕三种布局方案。采用移动优先策略，先设计小屏幕布局。小屏幕显示空间有限，在设计上要细化内容，突出主要内容，简化形式，折叠导航，减少横幅广告。在屏幕布局中，可以扩展导航，适当地放大横幅，并在内容区域中显示四川字体和骨架布局。大屏幕的布局是基于中间屏幕的布局，因此侧边栏的内容为“display: block”的显示状态。适当增加网站的内容，突出网站的特色，提高网站的性能效果，弥补小屏幕的视觉限制。为访问者提供新的视觉元素和丰富的页面内容。

可以看出,响应页面的设计策略可以提供各种各样的布局,以便网页能提供良好的用户体验和视觉效果在不同的终端设备,广泛的优点,充分发挥移动互联网渠道,高覆盖率和容易使用。移动优先策略可以避免移动端加载过多资源，不需要重新绘制PC风格，也不影响PC端的性能效果。

响应式设计为网站移动性提供了一种新的响应式网页的设计策略和选择。随着响应式设计技术的不断发展和完善，它将得到越来越多的关注和应用。想知道更多关于ui设计的设计素材与技巧，也可以点击本站的其他文章进行学习。