怎么写响应式页面( 三 ) _响应

就要将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。首先我们设计webkit内核浏览器下禁用文字大小调整，代码如下：html { -webkit-text-size-adjust: none； }其次就是代码的转换了，如下图所示：其实在480px宽度下的时候，整体框架布局已经不用设置，马海祥认为我们应该考虑得更多的是怎么把一个良好的页面布局展示给用户。
而在这个模式下，如果导航条有很多选项的时候，就会相互堆叠换行，那么这里我们设计成点击出下拉菜单形式，如下图所示：这里我们首先考虑在小设备窗口下header太高已经占据了大半的屏幕显示，所以这里我们重新设定下header的高度，能完整呈现出这个站点logo就可以了。在480px小设备窗口下浏览，页面内容会很长，这个时候我们要在底部加个返回页面顶部的按钮。
5.怎么设计制作响应式网页随着移动和跨屏时代的来临，响应式网页越来越重要，通过网页制作，使得不同设备、分辨率的网站都有最好的视觉体验。那就前端方面，该怎么才能制作一个响应式网页呢？
工具/原料
网页编辑器
Photoshop
方法/步骤
需要先有大屏幕和小屏幕两版的设计稿，或者超大屏幕、大屏幕和小屏幕三屏，以下图片是两屏设计，适应PC端和移动端。
将两屏所需的图片，用photoshop分别切出来，保存在两个文件夹，方便管理，每一个版本只会调用对应版本图片。
meta头部设置参数，根据设备分辨率让浏览器的可视宽度来适应。
进入html框架部分，多版本元素一致情况下，按照其中一个版本添加html的Dom元素即可。若有差异的话，也要在对应的位置，添加Dom元素，后续通过css或者js使该部分隐藏。
进入CSS编写部分，个人习惯是从大屏幕往小屏幕编写的，因为大版本通常包含的元素比小版本要多。
CSS使用媒介查询-Media Queries方法进行编写，分别写不同版本的CSS样式。
由于媒介查询的方法，并不适应低版本的浏览器，需要加入JS去帮助兼容，以下JS可上网下载。需要注意点是此JS一般需要跟网站的index.html放在同一个目录下，不适合分开管理，否则无法加载图片或者样式。
6.html5 怎么制作响应式网页HTML5 制作响应式网页，首先需要考虑是全32313133353236313431303231363533e78988e69d8331333337626135平台适配还是只是移动端适配。
这里以移动端响应式网站为例，讲述如何制作响应式网页。1、选定基本设计尺寸，一般以1080为基准确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。
2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。
一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。3、使用CSS媒体查询和rem (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'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);4、将绝对单位换算为rem 详细内容请参考我写的百度经验：。
7.如何用一简单的CSS制作响应式HTML网页建议展开阅读