(移动端媒体查询) 总结 上

不知不觉就到一个月的尾声,是时候计划给自己每天做一个小小的总结.虽是小白,但每天的总结是不可少的

1.媒体查询
meta 语句 (熟记)
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

媒体类型引用方法:
(1) link方式
<link rel="stylesheet" href="css/wide.css" media="screen and (max-width:640px)" />

(2) @import 方式
<style>
@import url(style.css) screen and (max-width:640px);
</style>

(3) 写在内部样式
<style>
@media screen and(max-width:640px){
h1{background:red;}
}
@media screen and (min-width:640px) and (max-width:960px) {
h1{background:red;}
}

</style>

2. 响应式布局的特点:  (了解下)
设计特点:
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题

缺点:
1.兼容各种设备工作量大,效率低下
2,代码累赘,会出现隐藏无用的元素,加载时间加长
3.其实这是一种折中性质的设计解决方案,多方面因素影响而达不到最佳效果

4.一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

拓展知识点: 
(1) 忽略将页面上的数字识别为电话号码
<meta name="fomat-detection" content="telephone=no" />

(2) 忽略Android 平台中对邮箱地址的识别:
<meta name="fomat-detection" content="email=no" />