响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用"大势所趋"来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
移动web前言
移动web：移动端手机浏览器或者微信里面浏览的网页
移动APP：手机上需要下载安装的应用程序
1.移动web介绍
1.1响应式开发一套代码运行多个终端优点:开发快维护快适配好缺点加载速度慢
1.2纯原生移动web开发一套代码运行一个端优点:加载速度快缺点开发慢维护慢适配差
1.3应用场景:
响应式开发用在一些新建的网站(PC和移动同时出来)对加载速度要求不是很高
纯原生移动web开发一般会用在一些已经有PC端上线的网站再次开发移动端移动端需要加载速度很快的网站
2.响应式开发原理
2.1CSS3的媒体查询：通过查询屏幕的的宽度来指定某个宽度区间的网页布局
2.2常见设备的屏幕宽度
超小屏幕（手机）768px以下
小屏设备（平板）768px-992px
中等屏幕（旧式电脑）992px-1200px
大屏设备（现代电脑）1200px以上
2.3媒体查询的语法
@mediascreenand(条件){
//满足条件执行CSS代码
}
and的前后必须有空格条件通常只有两个min-widthmax-width
@media(条件){
//满足条件执行CSS代码
}
可以简写省略screenand
2.4媒体查询的写法的顺序和特性
2.4.1条件判断有两种
min-width屏幕宽度大于等于某个值生效(最小宽度)
max-width屏幕宽度小于等于某个值的时候生效(最大宽度)
2.4.2条件判断的参考值通常有以下4个
width>1200大屏幕大屏PC设备
992<width<1200中屏幕老式电脑
768<width<992小屏幕平板设备
width<768超小屏幕手机
2.4.3媒体查询判断的顺序说明
1.如果使用min-width条件判断的时候条件判断大小要从小到大写
/*min-width:768px当屏幕的宽度大于等于768时背景颜色为green*/
@mediascreenand(min-width:768px){
body{
background-color:green;
}
}
/*min-width:992px当屏幕的宽度大于等于992时背景颜色为blue*/
@mediascreenand(min-width:992px){
body{
background-color:blue;
}
}
/*min-width:1200px当宽度大于等于1200时背景颜色为pink*/
@mediascreenand(min-width:1200px){
body{
background-color:pink;
}
}
2.如果使用max-width条件判断到时候条件判断大小要从大到小写
/*max-width:1200px:宽度在1200以下*/
@mediascreenand(max-width:1200px){
body{
background-color:green;
}
}
/*max-width:992px:宽度在992以下*/
@mediascreenand(max-width:992px){
body{
background-color:blue;
}
}
/*max-width:768px:宽度在768以下*/
@mediascreenand(max-width:768px){
body{
background-color:pink;
}
}
2.3.4写法的特性有两个
向上兼容只写了小的判断,大的判断没有写,但是在大屏幕下也会生效
向下覆盖同时写了小的判断和大的判断,满足大的条件会生效大的条件的样式,大的条件写在后面会把小的条件的样式覆盖
2.3.5使用媒体查询实现网页布局
在大屏幕下显示4列中屏幕显示3列小屏幕显示2列超小屏幕显示1列
/*w768~992每一行放置两个子元素50%*/
@mediascreenand(min-width:768px){
.box>p{
width:50%;
}
}
/*w992~1200每一行放置三个子元素33.33%*/
@mediascreenand(min-width:992px){
.box>p{
width:33.33%;
}
}
/*w>1200每一行放置四个子元素25%*/
@mediascreenand(min-width:1200px){
.box>p{
width:25%;
}
}
原理就是通过媒体查询判断条件改变盒子的宽度
3.响应式开发框架Bootstrap介绍
特点：灵活简介，代码优雅，美观大方
好处：Bootstrap让我们的Web开发更简单，更快捷
版本：目前市面上使用最多的是3.x.x版本除此之外还有2.3.2对IE8支持现已有4.0.0的正式版
相关链接:中文官网使用Bootstrap构建的网站
4.库和框架的区别
jquery:库便捷的DOM(你想实现什么功能就调用什么方法)(主导者是你你调用库)
Bootstrap:框架界面工具集框架是他来控制你(框架制定好了一系列规则用户按照规则进行编写)可以实现整个网站大多数功能
插件:fullpage功能比较单一只是实现了网页里面的某个或几个功能
5.Bootstrap的基本使用
5.1下载:去Bootstrap官网中文官网的起步里面下载生产环境的Bootstrap解压之后把整个文件夹放到项目里面来也可以使用BootstrapCDN
5.2引入Bootstrap
先引入Bootstrap的CSS(如果想要主题可以在引入带主题的CSS)
再引入自己的CSS
先引入jquery(因为Bootstrap依赖jquery)
再引入Bootstrap的JS
再引入自己的JS
<!DOCTYPEhtml>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1">
<!--上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！-->
<title>Bootstrap101Template</title>
<!--Bootstrap-->
<linkhref="lib/bootstrap/css/bootstrap.css"rel="stylesheet">
<!--html5shiv是为了让低版本IE支持html5新标签-->
<!--respond.js是为了让低版本IE支持CSS3媒体查询-->
<!--但是注意respond.js需要在服务器下运行就是localhost不能再file下运行不然无法工作-->
<!--条件注释IE版本小于IE9条件成立就执行下面的代码如果条件不成立就是注释不执行-->
<!--[ifltIE9]>
<scriptsrc="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<scriptsrc="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--bootstrap的JS插件依赖jquery所以要先引入jquery-->
<scriptsrc="lib/jquery/jquery.min.js"></script>
<!--在引入Bootstrap的JS文件-->
<scriptsrc="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
5.3引包的顺序
先引入第三方的框架
再引入自己的文件
CSS放到head里面引入(有些特殊的JS文件对页面渲染有作用的要放到head中)
js放到body结束标签是上面引入
5.4视口
视口:浏览器的可视窗口在PC端是会受到浏览器窗口变化而变化
视口在PC端是可视窗口(会变的)在移动端有一个固定的值通常是默认980
但是默认移动端的时候980会造成网页的缩放或者出滚动条
解决移动端默认视口会造成网页缩放和滚动条设置meta标签设置默认是视口的宽度等于设备的宽度<metaname="viewport"content="width=device-width">
视口的其他属性初始化缩放initial-scale=1.0是否允许用户缩放user-scalable=no最大maximum-scale=1.0和最小缩放minimum-scale=1.0
meta:vp+tab凡是写移动端页面一来就是加上视口
5.5浏览器兼容模式
1.<metahttp-equiv="X-UA-Compatible"content="IE=edge">
http-equiv="X-UA-Compatible"表示设置IE浏览器的兼容模式
content="IE=edge"表示让IE浏览器用最新的渲染引擎渲染页面
6.Bootstrap文档
6.1基础CSS样式
概要(常用)
布局容器
栅格系统(常用)
xs:超小屏幕手机(<768px)
sm:小屏幕平板(≥768px)
md:中等屏幕桌面显示器(≥992px)
lg:大屏幕大桌面显示器(≥1200px)
预置排版样式
统一预制标签样式
文本对齐(常用)
改变大小写
代码样式
页面输出代码
表格样式
各种表格样式
表单样式
各种表单组合的样式
按钮样式
各种按钮颜色和按钮大小等样式(常用)
图片样式
图片圆角的样式
辅助工具类
内容块居中(常用)
快速浮动和清除浮动(常用)
显示隐藏(常用)
响应式工具类(常用)
hidden-xx:在某种屏幕下隐藏
visible-xx:在某种屏幕尺寸下显示
基础CSS这块只是将我们常用想一些元素的样式做了美化,如果需要使用直接拿过来用就行了
6.2预制界面组件
导航(常用)
导航条(常用)
面包屑导航
下拉菜单(常用)
按钮式下拉菜单
按钮组
输入框组
警告框
页头
分页
列表组(常用)
面板(常用)
媒体对象(常用)
进度条
Glyphicons字体图标(常用)
标签
徽章
缩略图
大屏幕
嵌入内容
内嵌
将我们日常使用的一些功能块例如下拉菜单,提前写好,我们使用时直接找到对应的demo然后拿回来做相应调整就行了
6.3Javascript插件
模态对话框(常用)
下拉菜单(常用)
滚动监听(常用)
标签页(常用)
工具提示
弹出框
警告框
按钮
折叠面板(常用)
轮播图(常用)
吸顶效果(常用)
data-spy="affix"
data-offset-top="什么位置出现"
data-offset-bottom="什么位置消失"
6.4Javascript插件依赖情况
jQuery
Bootstrap框架中的所有JS组件都依赖jquery实现
7.项目搭建
7.1搭建Bootstrap页面骨架及项目目录结构
├─/project/···················项目所在目录
└─┬─/css/·······················自己的CSS文件
├─/font/······················使用到的字体文件
├─/img/·······················使用到的图片文件
├─/js/························自己写的JS脚步
├─/lib/·······················从第三方下载回来的库【只用不改】
├─/favicon.ico················站点图标
└─/index.html·················入口文件
7.1.1约定编码规范
1.HTML约定
在head中引入必要的CSS文件,优先引入第三方的CSS,方便我们自己的样式覆盖
在body末尾引入必要的JS文件,优先引入第三方的JS文件,注意JS文件之间的依赖关系
比如Bootstrap.js依赖jquery,那就应该先引入jquery.js然后引用Bootstrap.js
2.CSS约定
除了公共级别的样式,其余样式全部由模块前缀
尽量使用直接子代选择器少用间接子代选择器避免误杀
7.2创建主页引入相应的文件
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title></title>
<linkrel="stylesheet"href="lib/bootstrap/bootstrap.css">
<linkrel="stylesheet"href="index.css">
</head>
<body>
<scriptsrc="lib/jquery/jquery.js"></script>
<scriptsrc="lib/bootstrap/bootstrap.js"></script>
<scriptsrc="index.js"></script>
</body>
</html>
7.3在我们默认样式表中讲默认字体设置为
body{
font-family:"HelveticaNeue",Helvetica,MicrosoftYahei,HiraginoSansGB,WenQuanYiMicroHei,sans-serif;
}
7.4完成页面空结构
先划分好页面的大容器,然后具体看每一个容器的单独情况
<!--头部区域-->
<header></header>
<!--/头部区域-->
<!--广告轮播-->
<section></section>
<!--/广告轮播-->
<!--立即预约-->
<section></section>
<!--/立即预约-->
<!--产品介绍-->
<section></section>
<!--/产品介绍-->
<!--新闻资讯-->
<section></section>
<!--/新闻资讯-->
<!--合作伙伴-->
<section></section>
<!--/合作伙伴-->
<!--脚注区域-->
<footer></footer>
<!--/脚注区域-->
<!--###7.5构建顶部通栏
<pclass="topbarhidden-xshidden-sm">
<pclass="container">
<pclass="row">
<pclass="col-md-2text-center">
<iclass="icon-mobilephone"></i>手机微金所<iclass="glyphiconglyphicon-chevron-down"></i>
</p>
<pclass="col-md-5text-center"><iclass="icon-telephone"></i>4006-89-4006（服务时间：9:00-21:00）
</p>
<pclass="col-md-2text-center">常见问题财富登录</p>
<pclass="col-md-3text-center">
<ahref=""class="btnbtn-danger">免费注册</a>
<ahref=""class="btnbtn-link">登录</a>
</p>
</p>
</p>
</p>
7.5.1container类(版心)
用于定义一个固定宽度且居中的版心
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
html,
body{
margin:0;
padding:0;
}
.container{
height:200px;
width:100%;
background-color:#f40;
margin:0auto;
}
@media(min-width:768px){
.container{
width:750px;
}
}
@media(min-width:992px){
.container{
width:970px;
}
}
@media(min-width:1200px){
.container{
width:1170px;
}
}
</style>
</head>
<body>
<pclass="container">
</p>
</script>
</body>
</html>
8.栅格系统
<pclass="row">
<pclass="col-md-2">
</p>
<pclass="col-md-5">
</p>
<pclass="col-md-2">
</p>
<pclass="col-md-3">
</p>
</p>
1.row类
<pclass="row">
</p>
2.col-**-*类
<pclass="col-md-3">
</p>
col-xs-[列数]：在超小屏幕下展示几份
col-sm-[列数]：在小屏幕下展示几份
col-md-[列数]：在中等屏幕下展示几份
col-lg-[列数]：在大屏幕下展示几份
xs:超小屏幕手机(<768px)
sm:小屏幕平板(≥768px)
md:中等屏幕桌面显示器(≥992px)
lg:大屏幕大桌面显示器(≥1200px)
此处顶部通栏已经被划分为四列
text-center的作用就是让内部内容居中显示
9.字体图标
1.字体图标生成网站
@font-face{
font-family:'itcast';
src:url('../fonts/MiFie-Web-Font.eot')format('embedded-opentype'),url('../fonts/MiFie-Web-Font.svg')format('svg'),url('../fonts/MiFie-Web-Font.ttf')format('truetype'),url('../fonts/MiFie-Web-Font.woff')format('woff');
}
[class^="icon-"],
[class*="icon-"]{
/*注意上面选择器中间的空格
我们使用的名为itcast的字体就是最上面的@font-face的方式声明*/
/*当字体名字之间有空格的都要用引号引起来,如果没有空格的话可以不用引号*/
font-family:itcast;
}
2.字体格式
eot:embedded-opentype
svg:svg
ttf:truetype
woff:woff
3.字体图标生成步骤
进入https://icomoon.io/网站
点击右上角icomoonApp
点击左上角importicons
选中所有导入的图标
点击右下角generatefont
点击左上角preferences设置字体名称和类名前缀
点击download
解压生成好的压缩包里面有demo.html
打开demo.html能够查看图标对应类名
使用的时候把fonts文件夹放到项目并且引入style.css（这里面就定义了那些图标的类名）
4.字体图标的使用步骤
得下载或者生成或者去借(去别的网站拿)一个字体文件
使用@font-face定义一个字体名称
先指定字体的名称font-family:"字体名称";
引入这个字体名称对应的字体文件如果不考虑兼容只引入ttfsrc:url(路径.ttf)format("truetype")
定义一个图标的类名来使用图标
先使用图标对应的字体名称font-family:"字体名称";
指定图标的编码放到类名的伪元素的content里面content:"e945";
清除默认的斜体
在页面使用定义好的图标的类名就可以了
总结
移动web：移动端浏览器显示的网页
移动web的两种开发方式
响应式开发方式：一套代码运行多个终端开发快维护快加载慢适配好用在一些新建的网站对速度要求不高的
纯原生移动web开发：分别写两套代码开发慢维护慢加载快适配差用在一些已经上线的了PC再次开发移动web对加载速度要求高的网页
响应式开发原理
CSS3媒体查询实现
媒体查询语法
@meidascreenand(){
sreenand可以省略如果不省略and前后要有空格
}
媒体查询的条件判断和顺序说明
1.媒体查询有两个条件判断min-width:屏幕宽度大于等于某个值成立条件判断要从小到大写
2.max-width：屏幕宽度小于等于某个值成立条件判断要从大到小写
媒体查询的特性
1.向上兼容：没有写大的判断也能生效小屏幕的判断
2.向下覆盖：同时写了小和大屏幕的判断大屏幕在后面会覆盖小屏幕的样式
响应式开发框架Bootstrap：灵活简介代码优雅美观大方
使用Bootstrap框架
下载
引入bootstrap
1.先引入bootstrap.css
2.引入jquery
3.引入bootstrap.js
视口:浏览器可视窗口移动端设置视口和设备一样宽
布局容器.container:固定宽度且居中.container-fluid宽度100%
栅格系统
栅格系统的4个档次
col-xsw<768
col-sm768<w<992
col-md992<w<1200
col-lgw>1200
栅格系统默认一行分为12列
分成4列col-xx-3
分理3列col-xx-4
分理2列col-xx-6
分理1列col-xx-12
搭建项目fontscss/font.cssimglib
创建Index.html引包先引入第三方再引入自己的
创建页面的骨架
搭建顶部通栏.container>.row>col-md-2col-md-5col-md-2col-md-3
字体图标
bootstrap官方图标组件->字体图标拷贝图标类名即可
自己生成字体图标icomoon.io网站生成
引入生成好的字体图标样式文件同时字体文件要放在旁边
本文转载自中文网 |
响应式布局的开发教程实例
推荐阅读
