响应式布局

Posted 2022-04-23 conlover

响应式概念：

一个网页可以兼容多种设备，而不是每一种设备写一套网页

常规的网站，大部分是1200px，缩小会出现横向滚动条，布局，样式全都不会改变

 

响应式和自适应的区别？

响应式：1套代码   典型例子：intel官网

自适应：多套代码，根据不同的设备加载不同的代码

示例网站：大部分的网站都有，因为现在的人用手机太多了

 

响应式网页的不足：

内容不宜过多，只适合一些展示类网站，代码量变大了，复杂了。不能有过于复杂的动画

 

响应式/自适应网页的测试：

1.浏览器自带的模拟器

     优点：简单方便

     缺点：结果要进一步确定

2.真实物理设备测试（大公司真是这样干的）

iphone 4 4s 5 5s 5c 6 6p 6s 6sp 7 7p 8 x xr xs

安卓 一样买一个

pad ipad 一样买一个

 

       优点：测试真实可靠

       缺点：成本高，测试任务量极大

3.电脑上自带的手机模拟器效果

 

响应式网站如何编写：

1.必须声明viewport（重点重点）

<meta name="viewport" content="width=device-width,initial-scale=1.0">

2.使用流式布局

 float:left , display:inline-block

3.文字，图片，容器...使用相对尺寸（70%，em，rem），不要使用绝对尺寸（px）

 em是一个相对单位，相对父元素

 rem是一个相对单位，相对于页面的根元素，即html

谷歌浏览器的最小号字体为12px，如果不足12，全部显示为12，别的浏览器没有限制

ont-size: 62.5%; 大部分浏览器的默认字体为16px，62.5就是10px

font-size: 100px;

4.最重要的原则：媒体查询技术 css3中的内容 media query

写响应式的时候一般不需要去管高度，高度让其自己去变化，响应式肯定是不会有横向的滚动条，纵向就不一定了

下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min)  ... 

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min)  ... 

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min)  ...