Home > Article > Web Front-end > Responsive layout development tutorial examples
Mobile web: Mobile web browser or web page browsed in WeChat
Mobile APP: Applications that need to be downloaded and installed on mobile phones
Responsive development is used in some new websites (PC and mobile are released at the same time) and the loading speed requirements are not very high
Pure native mobile web development generally Used in some websites that have already been launched on PC to develop mobile terminals again. Mobile terminals need to load websites quickly
Ultra-small screen (mobile phone ) 768px or below
Small screen devices (tablets) 768px-992px
Medium screen (old computers) 992px-1200px
Large screen devices (modern computers) 1200px or above
@media screen and (条件){ //满足条件执行CSS代码 } and的前后必须有空格 条件通常只有两个 min-width max-width @media (条件){ //满足条件执行CSS代码 } 可以简写省略 screen and
min-width The screen width is greater than or equal to a certain value to take effect (minimum width)max-width The screen width is less than or equal to a certain value It takes effect when (maximum width)
width > 1200 大屏幕 大屏PC设备 992 < width < 1200 中屏幕 老式电脑 768 < width < 992 小屏幕 平板设备 width < 768 超小屏幕 手机
1. If the min-width condition is used for judgment, the condition judgment size must be from small to uppercase
/*min-width: 768px 当屏幕的宽度大于等于768时 背景颜色为green */ @media screen and (min-width: 768px){ body{ background-color: green; } } /*min-width: 992px 当屏幕的宽度大于等于992时 背景颜色为blue*/ @media screen and (min-width: 992px){ body{ background-color: blue; } } /*min-width: 1200px 当宽度大于等于1200时 背景颜色为pink*/ @media screen and (min-width: 1200px){ body{ background-color: pink; } }
2. If the max-width condition is used for judgment, the condition judgment size must be from large to lowercase
/*max-width: 1200px:宽度在1200以下*/ @media screen and (max-width: 1200px) { body { background-color: green; } } /*max-width: 992px:宽度在992以下*/ @media screen and (max-width: 992px) { body { background-color: blue; } } /*max-width: 768px:宽度在768以下*/ @media screen and (max-width: 768px) { body { background-color: pink; } }
For upward compatibility, only small judgments are written, and large judgments are not written, but they will also take effect on a large screen
Downward coverage writes small judgments and big judgments at the same time. If the big condition is met, the style of the big condition will take effect. If the big condition is written later, the style of the small condition will be overwritten.
Display 4 columns on a large screen, display 3 columns on a small screen, display 2 columns super small The screen displays 1 column
/*w 768~992 每一行放置两个子元素 50%*/ @media screen and (min-width: 768px){ .box > p{ width: 50%; } } /* w 992~1200 每一行放置三个子元素 33.33%*/ @media screen and (min-width: 992px){ .box > p{ width: 33.33%; } } /*w >1200 每一行放置四个子元素 25%*/ @media screen and (min-width: 1200px){ .box > p{ width: 25%; } }
The principle is to change the width of the box through media query judgment conditions
Features: Flexible introduction, elegant code, beautiful and elegant
Benefits: Bootstrap makes our web development simpler and faster
Version: Currently the most used version on the market is version 3.x.x. In addition, there is also 2.3.2 that supports IE8 and now there is an official version of 4.0.0
Related links: Chinese official website built using Bootstrap
jquery: library convenient DOM (Just call whatever method you want to achieve) (The leader is you and you call the library)
Bootstrap: The framework interface tool set is the framework that controls you (the framework has formulated a A series of rules (written by users according to the rules) can realize most functions of the entire website
Plug-in: fullpage has a relatively simple function and only realizes one or several functions in the webpage
First introduce the CSS of Bootstrap (if you want a theme, you can introduce the CSS with a theme)
Introduce your own CSS
First introduce jquery (because Bootstrap relies on jquery)
Then introduce Bootstrap’s JS
Then introduce your own JS
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet"> <!-- html5 shiv是为了让低版本IE支持html5新标签 --> <!-- respond.js是为了让低版本IE支持CSS3媒体查询 --> <!-- 但是注意respond.js需要在服务器下运行 就是localhost 不能再file下运行不然无法工作 --> <!-- 条件注释 IE版本小于IE9 条件成立就执行下面的代码 如果条件不成立就是注释不执行 --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- bootstrap的JS插件依赖jquery 所以要先引入jquery --> <script src="lib/jquery/jquery.min.js"></script> <!-- 在引入Bootstrap的JS文件 --> <script src="lib/bootstrap/js/bootstrap.min.js"></script> </body> </html>
Introduce the third-party framework first
Introduce your own files
CSS is imported into the head (some special JS files that are useful for page rendering should be placed in the head)
js placed in the body end tag is introduced above
Viewport : The visual window of the browser on the PC will change due to changes in the browser window
The viewport on the PC is the visible window (will change) On the mobile side there is one The fixed value is usually the default 980
但是默认移动端的时候980会造成网页的缩放或者出滚动条
解决移动端默认视口会造成网页缩放和滚动条 设置meta标签设置默认是视口的宽度等于设备的宽度
视口的其他属性 初始化缩放 initial-scale=1.0 是否允许用户缩放 user-scalable=no 最大 maximum-scale=1.0 和最小缩放 minimum-scale=1.0
meta:vp+tab 凡是写移动端页面一来就是加上视口
1.
http-equiv="X-UA-Compatible" 表示设置IE浏览器的兼容模式
content="IE=edge" 表示让IE浏览器用最新的渲染引擎渲染页面
概要 (常用)
布局容器
栅格系统 (常用)
xs : 超小屏幕 手机 (<768px)
sm : 小屏幕 平板 (≥768px)
md : 中等屏幕 桌面显示器 (≥992px)
lg : 大屏幕 大桌面显示器 (≥1200px)
预置排版样式
统一预制标签样式
文本对齐 (常用)
改变大小写
代码样式
页面输出代码
表格样式
各种表格样式
表单样式
各种表单组合的样式
按钮样式
各种按钮颜色 和 按钮大小等样式 (常用)
图片样式
图片圆角的样式
辅助工具类
内容块居中 (常用)
快速浮动 和 清除浮动 (常用)
显示隐藏 (常用)
响应式工具类 (常用)
hidden-xx : 在某种屏幕下隐藏
visible-xx : 在某种屏幕尺寸下显示
基础CSS这块只是将我们常用想一些元素的样式做了美化,如果需要使用直接拿过来用就行了
导航 (常用)
导航条 (常用)
面包屑导航
下拉菜单 (常用)
按钮式下拉菜单
按钮组
输入框组
警告框
页头
分页
列表组 (常用)
面板 (常用)
媒体对象 (常用)
进度条
Glyphicons字体图标 (常用)
标签
徽章
缩略图
大屏幕
嵌入内容
内嵌
将我们日常使用的一些功能块例如下拉菜单,提前写好,我们使用时直接找到对应的demo然后拿回来做相应调整就行了
模态对话框 (常用)
下拉菜单 (常用)
滚动监听 (常用)
标签页 (常用)
工具提示
弹出框
警告框
按钮
折叠面板 (常用)
轮播图 (常用)
吸顶效果 (常用)
data-spy="affix"
data-offset-top="什么位置出现"
data-offset-bottom="什么位置消失"
jQuery
Bootstrap 框架中的所有JS组件都依赖jquery实现
├─ /project/ ··················· 项目所在目录 └─┬─ /css/ ······················· 自己的CSS文件 ├─ /font/ ······················ 使用到的字体文件 ├─ /img/ ······················· 使用到的图片文件 ├─ /js/ ························ 自己写的JS脚步 ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】 ├─ /favicon.ico ················ 站点图标 └─ /index.html ················· 入口文件
在head中引入必要的CSS文件,优先引入第三方的CSS,方便我们自己的样式覆盖
在body末尾引入必要的JS文件,优先引入第三方的JS文件,注意JS文件之间的依赖关系
比如Bootstrap.js 依赖jquery,那就应该先引入jquery.js 然后引用Bootstrap.js
除了公共级别的样式,其余样式全部由模块前缀
尽量使用直接子代选择器 少用间接子代选择器避免误杀
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="lib/bootstrap/bootstrap.css"> <link rel="stylesheet" href="index.css"> </head> <body> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/bootstrap.js"></script> <script src="index.js"></script> </body> </html>
body{ font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif; }
先划分好页面的大容器,然后具体看每一个容器的单独情况
<!-- 头部区域 --> <header></header> <!-- /头部区域 --> <!-- 广告轮播 --> <section></section> <!-- /广告轮播 --> <!-- 立即预约 --> <section></section> <!-- /立即预约 --> <!-- 产品介绍 --> <section></section> <!-- /产品介绍 --> <!-- 新闻资讯 --> <section></section> <!-- /新闻资讯 --> <!-- 合作伙伴 --> <section></section> <!-- /合作伙伴 --> <!-- 脚注区域 --> <footer></footer> <!-- /脚注区域 -->