响应式页面怎么写(什么是响应式网页,如何实现一个响应式网页)
普通div+css改为响应式界面怎么写
方法1：使用已有的响应式网页框架，如bootstrap;
方法2：
a:声明页面viewport标签—-响应式页面的前提条件
!--device指设备，initial-scale指打开的缩放比例，user-scalable指用户是否可以缩放--
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技术
如何用一简单的CSS制作响应式HTML网页
建议展开阅读
新人如果想快速开发出响应式网站建议使用响应式框架Bootstrap,Foundation等等......
三个部分[Viewport][网格视图][媒体查询]
1.先在head里面设置Viewport
meta?name="viewport"?content="width=device-width,?initial-scale=1.0"
用户可以通过平移和缩放来看网页的不同部分。
2.很多响应式都基于网格视图设计
响应式网格视图通常是?12?列，宽度为100%，在网页自动伸缩
比如CSS里面写
*?{
????box-sizing:?border-box;
}
[class*="col-"]?{
????float:?left;
????padding:?15px;
}
.col-1?{width:?8.33%;}
.col-2?{width:?16.66%;}
.col-3?{width:?25%;}
.col-4?{width:?33.33%;}
.col-5?{width:?41.66%;}
.col-6?{width:?50%;}
.col-7?{width:?58.33%;}
.col-8?{width:?66.66%;}
.col-9?{width:?75%;}
.col-10?{width:?83.33%;}
.col-11?{width:?91.66%;}
.col-12?{width:?100%;}
这样即可在html写
div?class="row"
div?class="col-3"
ul
li标题1/li
li标题2/li
li标题3/li
li标题4/li
/ul
/div
div?class="col-9"
h12333333/h1
p2333333333333333333333333333333333333333333333333333333333333333333333333333333333333333/p
p2333333333333333333333333333333333323333333333/p
/div
达到简单的响应式效果[拖拽浏览器大小查看]
图片响应式方法
div?{
width:?100%;
height:?400px;
background-image:?url('url');
background-repeat:?no-repeat;
background-size:?contain;
border:?1px?solid?red;
}
background-size?属性设置为?"contain",?图片比例会自动缩放。
3.媒体查询主要用于针对不同的媒体类型定义不同的样式
比如我在电脑显示图片1,但是在手机显示的是图片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';
};
响应式网页怎么做啊
响应式网页就是根据不同的用户访问设备展现不同的页面样式，比如PC端页面尺寸在移动端表现不利于用户浏览。
为了满足不同设备屏幕，可以准备两套各自适合PC端和移动端的页面，有服务器判断来访设备类型，选择适当的页面进行用户请求响应。再就是通过页面判断来访设备，控制响应的布局样式以达到最佳的视觉体验。
再就是借助响应式前端框架，通过弹性网格布局调整页面以符合访问设备的尺寸需求，比如Bootstrap。此外响应式网页还需要注意对图片等资源的处理，优化请求响应速度等各个方面。