响应式网页怎么写( 二 ) _响应

而在这个模式下，如果导航条有很多选项的时候，就会相互堆叠换行，那么这里我们设计成点击出下拉菜单形式，如下图所示：这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示，所以这里我们重新设定下header的高度，能完整呈现出这个站点logo就可以了。在480px小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。
2.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.普通div+css改为响应式界面怎么写方法1：使用已有的响应式网页框架，如bootstrap;
方法2:
a：声明页面viewport标签—-响应式页面的前提条件

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">b：使用响应式图片
/*只是举例而已，max-width是图片在页面缩小到影响自身大小时，图片的最大宽度，但不会超过自身图片的原有宽度*/
img{
max-width:50%；/*防止图片无限放大产生失真*/
}c：使用流式布局
布局元素使用浮动float或者行内块 inline-block;
ps：个人建议使用行内块，第一不影响其余元素的布局，第二方便设置。
d：避免使用绝对尺寸（px等），使用相对单位（如rem/em/%）;
ps：这里科普一下，我们都知道em是根据父级元素字体的大小来计算的，而rem更狠是根据根元素的字体大小来计算，所以推荐使用rem，减少使用em计算的难度。
f：使用CSS3 MediaQuery技术
4.怎么设计制作响应式网页随着移动和跨屏时代的来临，响应式网页越来越重要，通过网页制作，使得不同设备、分辨率的网站都有最好的视觉体验。那就前端方面，该怎么才能制作一个响应式网页呢？
工具/原料
网页编辑器
Photoshop
方法/步骤
需要先有大屏幕和小屏幕两版的设计稿，或者超大屏幕、大屏幕和小屏幕三屏，以下图片是两屏设计，适应PC端和移动端。
将两屏所需的图片，用photoshop分别切出来，保存在两个文件夹，方便管理，每一个版本只会调用对应版本图片。
meta头部设置参数，根据设备分辨率让浏览器的可视宽度来适应。
进入html框架部分，多版本元素一致情况下，按照其中一个版本添加html的Dom元素即可。若有差异的话，也要在对应的位置，添加Dom元素，后续通过css或者js使该部分隐藏。
进入CSS编写部分，个人习惯是从大屏幕往小屏幕编写的，因为大版本通常包含的元素比小版本要多。