回顾:
事实:移动端的用户已经超过pc端
设计原则:移动端优先原则
设计:
-
Header
Header(
“
location:http://m.jd.com
”
)
-
Media query 媒体查询
@media only screen and (min-width:300px) and (max-width:500){
.media{
}
#id{
}
}
<link type=
”
text/css
”
rel=
”
stylesheet
”
href=
”
./m.css
”
media=
”
screen and ()
”
/>
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:用户是否可以手动缩放。
单位: 要使用rem 而不是px
1rem 相当于当前网页根节点html的字体大小
1em 相当当前元素的父级元素的字体大小
Bootstrap 初始化
-
Bootstrap 的css
-
Jquery
-
Bootstrap 的js
-
H5规范
字体 小标签
注意: 要把字体文件复制过来
重点:Bootstrap 栅格布局
设备宽度:
<768px
|
超小设备 xs
|
768-992px
|
小设备 手机平板 sm
|
992-1200px
|
中等设备 电脑屏幕 md
|
>1200px
|
超大设备 lg
|
-
栅格布局 把屏幕12等分
-
栅格布局的两种布局模式
1---container 相当于我们的固定宽度布局
2--container-fluid 相当于宽度100%的布局
-
划分宽度
-
如何实现根据屏幕大小响应式布局
-
超出12等分的超出部分另起一行
6 . 偏移
-
栅格嵌套
-
列排序 关键词 push pull col-md-push-8