怎样把html改为响应式,如何用一简单的CSS制作响应式HTML网页 响应式单页面

如何用一简单的CSS制作响应式HTML网页

建议展开阅读

新人如果想快速开发出式网站建议使用响应式框架Bootstrap,Foundation等等......

三个部分[Viewport][网格视图][媒体查询]

1.先在head里面设置Viewport

用户可以通过平移和缩放来看网页的不同部分。

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写

标题1

标题2

标题3

标题4

2333333

2333333333333333333333333333333333333333333333333333333333333333333333333333333333333333

2333333333333333333333333333333333323333333333

达到简单的响应式效果[拖拽浏览器大小查看]

图片响应式方法

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

详细可以私信我

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

置宽度高度，宽度全部的默认是100% 高度改为由素撑开 然后通过js函数去写px的计换成为 rem ，肯定是很难的 肯定也会跑版的 响应式设计肯定是要一开始就设计好的 不然后期几乎改的人想重构

会css和html能完成页面和h5css3也能写一些jq也能写一些简单的效果知道响应式一般工资多少

实习生2000，一年是2000到4000。之后根据项目完成的速度效果加工资的。一般半年调一次