一. 布局
横向一列或两列,字体大,图像大
二. 响应式布局: 浏览器根据css样式设定的不同的分辨率,自动地调整页面效果;
它是CSS3的功能,关键字为media query(媒体查询)
三. 常见的四种分辨率
1. 超大屏幕(高清分辨率) 屏幕宽度1200px以上
2. 大屏幕(针对普通电脑屏幕) 屏幕宽度在 1000px 至 1200px
3. 小屏幕(针对平板) 屏幕宽度在 768px 至 1000px
4. 超小屏幕(针对手机) 屏幕宽度小于等于 768px
四. 屏幕宽度 内容宽度
在移动端直接设置内容宽度为设备的宽度
min-device-width 设备的最小宽度
max-device-width 设备的最大宽度
min-width 内容的最小宽度
max-width 内容的最大宽度
五. 写响应式布局的两种方式
1. 使用link,导入已写好的CSS样式
2. 在样式中国嵌套@media screen....语句
六. viewport
viewpoint是手机的可视化窗口(理解为浏览器),一般情况下,手机的可视化窗口都会比手机
的屏幕宽,比如苹果的可视化窗口为980px,而响应式布局就是浏览器会根据不同的分辨率,来
自动的调整页面效果,所以当我们设置了响应式布局时,手机上会呈现我们设定的小屏幕(768px
--1000px)的页面效果,但手机上,我们需要呈现的是适应手机屏幕宽度的页面效果,也就是
超小屏幕(<= 768px),这时候我们就必须设置手机的可视化窗口的宽度为手机屏幕的宽度,这样
才能设置为响应式布局的超小屏幕的css的样式效果.
//设置可视化窗口宽度为设备宽度
<meta name="viewport" content="width=device-width, initial-scale=1">
七. bootstrap自带响应式布局
bootstrap自带的响应式布局有四种分辨率,就是上面第三点列出来的四种;
col-xs-12 分辨率为超小屏幕,占据12列
col-sm-10 分辨率为小屏幕,占据10列
col-md-8 分辨率为大屏幕,占据8列
col-lg-6 分辨率为超大屏幕,占据6列
当在标签中设置<div class="col-xs-12 header"></div>,那么在四个分辨率屏幕中
header的宽度都是占据12列的宽度;
当在标签中设置<div class="col-sm-12 header"></div>,那么在超大,大,小分辨率屏幕中
header的宽度都是占据12列的宽度,这里就没有设置超小屏幕的header的宽度;