码迷,mamicode.com
首页 > 其他好文 > 详细

响应式布局

时间:2019-07-18 19:33:49      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:dia   查询   情况下   最小   相对   过多   系统   大型   动画   

响应式概念:

一个网页可以兼容多种设备,而不是每一种设备写一套网页
常规的网站,大部分是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) { ... }
技术图片

 

 

响应式布局

标签:dia   查询   情况下   最小   相对   过多   系统   大型   动画   

原文地址:https://www.cnblogs.com/conlover/p/11209422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!