像素与分辨率
- 像素:图片中不可分割的最小单元或元素
- 分辨率:就是多少像素每英寸,通常称为dpi
屏幕尺寸(宽度)
- 超小屏幕:宽度 < 768,如:手机
- 小型屏幕:768 <= 宽度 < 992,如:平板
- 中等屏幕:992 <= 宽度 < 1200,如:电脑
- 超大屏幕:宽度 >= 1200,如:电视
响应式布局
- 说明:根据客户端的不同显示不同的效果,称为响应式布局。
- 原因:现在很多的应用移动设备的访问已经称为了主流,设计时应该移动设备优先。
解决方案
- 根据客户端不同,跳转到不同的网站
- 适合于较大的无法兼容的网站,如:京东、淘宝
- 使用媒体查询
- 适合于可以兼容的不太复杂的网站,如:苹果官网
媒体查询
- 相关语法
语法 说明 @media 媒体查询标志 [only] screen [只]支持屏幕 and 并且 min-width 最小宽度 max-width 最大宽度 min-height 最小高估 max-height 最大高度 - 使用方式
<head> <style type="text/css"> /* 方式1:使用@media指定样式 */ /* @media only screen and (max-width: 768px) { div { height: 200px; background-color: red; } } */ /* 方式2:使用@import导入外部的CSS文件 */ @import url("01-chaoxiao.css") only screen and (max-width: 768px); @media only screen and (min-width: 768px) and (max-width: 992px) { div { height: 200px; background-color: green; } } @media only screen and (min-width: 992px) and (max-width: 1200px) { div { height: 200px; background-color: blue; } } /* @media only screen and (min-width: 1200px) { div { height: 200px; background-color: orange; } } */ </style> <!-- 方式3:使用link标签加载外部CSS文件,需要设置media属性 --> <link rel="stylesheet" type="text/css" href="01-chaoda.css" media="only screen and (min-width: 1200px)" /> </head>
viewport(了解)
- 说明:viewport 是用户网页的可视区域。是一个比实际屏幕尺寸大的虚拟窗口,称为视区或视口
- 示例:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 属性:
- width:控制 viewport 的大小,可以指定的一个值,如 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
- height:和 width 相对应,指定高度。
- initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
- maximum-scale:允许用户缩放到的最大比例。
- minimum-scale:允许用户缩放到的最小比例。
- user-scalable:用户是否可以手动缩放。
bootstrap简介
- 说明:
- 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
- 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
- 官网:https://www.bootcss.com
- 下载:用于生产环境的版本(3.3.7)
- 使用:
- 将下载好的bootstrap拷贝到项目目录(也可以是cdn资源)
- 复制粘贴基础模板
- 修改依赖文件路径
bootstrap语法
- 布局容器
container
:类用于固定宽度并支持响应式布局的容器container-fluid
:类用于 100% 宽度,占据全部视口(viewport)的容器
- 栅格系统
- 行:
row
,内容宽度会被平均分为12等份,设置宽度只需要指定份数即可 - 列:
col-xs-份数
、col-sm-份数
、col-md-份数
、col-lg-份数
- 列偏移:
col-xs-offset-份数
、col-sm-offset-份数
、col-md-offset-份数
、col-lg-offset-份数
- 列排序:
col-屏幕-pull-份数
、col-屏幕-push-份数
- 嵌套列:栅格系统可以进行嵌套使用
- 行:
全局CSS样式
- 排版
- 代码
- 表格
- 表单
- 按钮
- 辅助类
组件
- 字体图标
- 下来菜单
- 按钮组
- 按钮式下来菜单
- 输入框组
- 导航
- 导航条
- 路径导航
- 分页
- 标签
- 徽章
- 巨幕
- 页头
- 缩略图
- 警告框
- 进度条
- 媒体对象
- 列表组
- 面板
JS插件
- 模态框
- 下拉菜单
- 滚动监听
- 标签页
- 工具提示
- 弹出框
- 警告框
- 按钮
可视化布局工具
- LayoutIt
标签: 框架
版权声明:除非特别标注,否则均为本站原创文章,转载时请以链接形式注明文章出处。
还木有评论哦,快来抢沙发吧~