响应式设计
媒体查询
响应式设计是根据不同设备浏览器分辨率或尺寸来展示不同页面结构,行为,表现的设计方式.
响应式设计的基本原理是通过媒体查询检测不同的设备的屏幕尺寸做处理.页面头部必须有meta声明viewport:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
有了媒体查询这个功能,自然有了所谓的响应式.
响应式的特点
设计特点:
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示的问题
缺点:
1.兼容各种农设备工作量大,效率低下
2.代码累赘,会出现隐藏的无用的元素,加载时间加长,其实这是一种折中性质的设计解决方案,多方面的因素影响而达不到最佳的效果
3.一定程度上改变了网站原有的布局,会出现用户混淆的情况
1.bootstrap框架中的栅格布局
网格系统的实现原理是通过定义容器的大小,平分为12份(也有平分为24份,32份的,但是12份的是比较常见的),在调整内外边距,最后掘和媒体查询,就制作出了强大的响应式网格系统,Bootstrap框架中的网格系统就是将容器平分为12份的
bootstrap有哪些缺点?
个人认为,所谓优缺点都是相对的,多数根据业务需求而定的.比如bootstrp2 以后的版本不支持IE6.当你的网站需要兼容到IE6的时候就不能使用bootstrap,当不需要的时候就变成了有点,通过现有的ui框架就能迅速的搭建前端页面.同事还可以用less重新设计组件.
3.bootstrap常用的有哪些组件
1.轮播图
2.下拉菜单
3.响应式的导航栏
移动端的页面布局
1.弹性布局(100%布局,流式布局)
好处:充分发挥大手机的优势---显示内容越多
缺点:屏幕过大,间距过大,比例失调.
特点:顶部和底部不管分辨率怎么变,他的高度和位置都不会改变:
中间每条招聘信息分辨率怎么变,招聘公司的图标do 条目的左边,薪资在右边;
2.等比缩放布局(rem)--网易,淘宝首页
视口(viewport)设置:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-html上根据不同分辨率设置不同font-size,通过Js计算出来
移动端页面重构常用单位
因为要适用所有的移动端屏幕尺寸,所以传统的Px布局页面在移动端就不太适用.
em是父盒子的倍数,rem是跟元素的倍数
1.rem是指相对于根元素的字体大小单位,能等比例适配所有屏幕,根据变化html也就是根元素的字体大小来控制rem的大小;
js计算:通过获取视口的宽度/实际设计图的宽度*html的font-size
2.css3新增单位.vw,vh
VW:视窗宽度，1VW等于视窗宽度的百分之一
VH:视窗高度，1VW等于视窗高度的百分之一
我们也可以把VW转换成PX赋值给font-size，
元素所展示的大小（设计图固定大小）=（VW*设计稿宽度）/100
VW = 元素所展示的大小（设计图固定大小）*100/设计稿宽度
例如：设备的分辨率为640*1136，逻辑像素为320*568，1VW就等于3.2px，我们把font-size：100px，转换成VW就等于31.25VW;
1rem等31.25VW获取到根元素大小一起结合写等比例绽放布局。
VW，VH是CSS3新增的单位，它只能有着自己的兼容性，IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Android browser4.4+支持，chrome for android39支持。
flexible.js是淘宝为了适配移动端开发的一个插件 http://huodong.m.taobao.com/act/yibo.html
flexible.js 做的三件事：
- 动态改写标签
- 给<html>元素添加data-dpr属性，并且动态改写data-dpr的值
- 给<html>元素添加font-size属性，并且动态改写font-size的值
目前Flexible会将视觉稿分成**100份**（主要为了以后能更好的兼容vh和vw），而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：
- 1a = 7.5px
- 1rem = 75px
https://github.com/flashlizi/cssreml转换插件
.adapter_size {font-size: 12px;}
[data-dpr="2"] .adapter_size {font-size: 14px;}
[data-dpr="3"] .adapter_size {font-size: 16px;}
动态计算html的font-size
<script type="text/javascript">
document.documentElement.style.fontSize=document.documentElement.clientWidth /100*31.25 + 'px'
</script>
<script type="text/javascript">
// 把尺寸放大N倍（N是window.devicePixelRatio）
var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
// 把屏幕的倍率缩小到N分之一（N是window.devicePixelRatio）
var scale = 1/window.devicePixelRatio;
var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
document.getElementById("vp").content = mstr;
</script>
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
浅谈px、em、rem的用法和区别
转载于:https://baijiahao.baidu.com/s?id=1637480830445523833&wfr=spider&for=pc
![bootstrap栅格布局笔记（1）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)