本文共 2782 字,大约阅读时间需要 9 分钟。
响应式概念:一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本
响应式开发原理:使用媒体查询media针对不同宽度的设备进行布局和样式的设置,从而达到适配不同设备的目的
响应式代码演示:
第35节:媒体查询
.box{ height: 400px; background-color: red;}
.box{ height: 400px; background-color: yellow;}
.box{ height: 400px; background-color: purple;}
可以看到div标签的样式在随浏览器窗口宽度变化而变化,从style1变化到style3,这就是响应式的原理
自适应概念:多套页面适配不同终端,网页自适应显示在不同大小的终端设备上
自适应代码演示:
35节:媒体查询
*{ padding: 0; margin: 0;}.box{ height: 400px;}/* 自适应的写法 *//* @media 设备类型 and 设备尺寸 { } */@media screen and (min-width:1200px) { .box{ background-color: pink; width: 90%; font-size: 24px; }}@media screen and (min-width:950px) and (max-width:1200px) { .box{ background-color: skyblue; width: 60%; font-size: 18px; }}@media screen and (max-width:950px) { .box{ background-color: orange; width: 40%; font-size: 14px; }}
微软中国模块搭建
.pro_list{ width: 95%; margin: 0 auto;}/* 标题部分 */.title{ margin: 30px 0 20px;}/* 产品列表部分 */.pro ul{ overflow: hidden; margin-right: -1%;}.pro ul li{ float: left; width: 24%; margin-right: 1%;}.pro ul li img{ width: 100%;}/* 文字部分 */.titles h3{ margin: 30px 0 10px;}.titles p{ margin-bottom: 10px;}
.pro_list{ width: 95%; margin: 0 auto;}/* 标题部分 */.title{ margin: 30px 0 20px;}/* 产品列表部分 */.pro ul{ overflow: hidden; margin-right: -1%;}.pro ul li{ float: left; width: 49%; margin-right: 1%; margin-bottom: 20px;}.pro ul li img{ width: 100%;}/* 文字部分 */.titles h3{ margin: 30px 0 10px;}.titles p{ margin-bottom: 10px;}
.pro_list{ width: 95%; margin: 0 auto;}/* 标题部分 */.title{ margin: 30px 0 20px;}/* 产品列表部分 */.pro ul li{ width: 100%; margin-bottom: 30px;}.pro ul li img{ width: 100%;}/* 文字部分 */.titles h3{ margin: 30px 0 10px;}.titles p{ margin-bottom: 10px;}
/* 重置样式 */*{ padding: 0; margin: 0;}li{ list-style: none;}a{ text-decoration: none;}img{ display: block;}
转载地址:http://tyogz.baihongyu.com/