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

CSS使用媒介查询-Media Queries方法进行编写，分别写不同版本的CSS样式。
由于媒介查询的方法，并不适应低版本的浏览器，需要加入JS去帮助兼容，以下JS可上网下载。需要注意点是此JS一般需要跟网站的index.html放在同一个目录下，不适合分开管理，否则无法加载图片或者样式。
5.如何用一简单的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">
<h1>2333333</h1>
<p></p>
<p></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
详细可以私信我
6.学写响应式网站,应该要怎么写1、学习CSS3的基础知识。
2、学习相关的媒体查询，如拼图前端框架对屏幕大小的响应方式：@media (min-width:760px){.container{width:750px;}}@media (min-width:1000px){.container{width:1000px;}}@media (min-width:1200px){.container{width:1200px；}}分别是平板、桌面、宽屏下的.container下的宽度。3、学习下网格系统，具体可参考：框架部分，多版本元素一致情况下，按照其中一个版本添加html的Dom元素即可。
若有差异的话，也要在对应的位置，添加Dom元素，后续通过css或者js使该部分隐藏。进入CSS编写部分，个人习惯是从大屏幕往小屏幕编写的，因为大版本通常包含的元素比小版本要多。
CSS使用媒介查询-Media Queries方法进行编写，分别写不同版本的CSS样式。由于媒介查询的方法，并不适应低版本的浏览器，需要加入JS去帮助兼容，以下JS可上网下载。
需要注意点是此JS一般需要跟网站的index.html放在同一个目录下，不适合分开管理，否则无法加载图片或者样式。。
8.html5 怎么制作响应式网页HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。
这里以移动端响应式网站为例，讲述如何制作响应式网页。1、选定基本设计尺寸，一般以1080为基准确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。