认识响应式布局_技术笔记

Szyrt 2020-09-27

三种方式实现响应式:js原生，css3media query，bootstrap等框架

截图
0赞 · 0采集
RelaxLearning 2020-06-15

bootstrap是移动优先框架，要求写<meta name="viewport" content="width=device-width,initial-scale=1.0">
引用bootstrap <link href="css/bootstrap.min.css" rel="stylesheet">
IE8、IE9需要引入respond.js:

0赞 · 0采集
RelaxLearning 2020-06-15

Bootstrap框架可以解决低端浏览器不支持css3属性的问题，还能解决不同的分辨率设备上网页的布局展示
Bootstrap:1.移动优先的简单框架 2.好处是写非常少的代码即可实现多终端的页面适配
类似IE8这种古老的浏览器，不支持media query, 需要引入Respond.js 去激活media query,Respond.js必须部署在websever域名下，不能在静态资源域名,存在跨域

0赞 · 0采集
慕婉清7434197 2019-12-09

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

截图
0赞 · 0采集
慕婉清7434197 2019-12-09

ie8y引入respond.js

截图
0赞 · 0采集
慕婉清7434197 2019-12-09

css,js,fonts

截图
0赞 · 0采集
慕工程3313179 2019-07-24

Response.js必须放在web service 中

截图
0赞 · 0采集
PQ123456 2019-03-17

兼容IE8，IE9会用到注释那一部分

截图
0赞 · 0采集
糟糠之妻 2018-04-19

meta标签中initial-scale=1.0(表示默认模式下页面不进行缩放)

0赞 · 0采集
慕丝4089693 2018-04-07

官网的引用

截图
0赞 · 0采集
慕丝4089693 2018-04-07

官网的引用

0赞 · 0采集
慕丝4089693 2018-04-07

兼容ie9 ie8

截图
0赞 · 0采集
qq_点_5 2018-02-16

传统界面

截图
0赞 · 0采集
qq_点_5 2018-02-16

bootstrap加入meta viewport........... bootstrap在IE8下要加入response.js

截图
0赞 · 0采集
orangewangjie3473319 2018-01-27

必须设置

截图
0赞 · 0采集
orangewangjie3473319 2018-01-27

为了兼容IE8，需引入respond.js,因为IE8 不支持 media query

截图
0赞 · 0采集
orangewangjie3473319 2018-01-27

自定义class命名一定不要和bootstrap固有的重名

截图
0赞 · 0采集
orangewangjie3473319 2018-01-26

js 涉及插件功能，只涉及响应式布局的话则不需要

截图
0赞 · 0采集
orangewangjie3473319 2018-01-26

bootstrap -- 写非常少的代码，即可实现多终端的页面适配

截图
0赞 · 0采集
id_wangrui 2017-11-03

bootstarp要求必须引入mvp标签

截图
0赞 · 0采集
id_wangrui 2017-11-03

去了解一下跨域问题

0赞 · 0采集
大赖 2017-09-26

//对于低端浏览器引入以下插件，bootsrap官网有 <!- -[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/reapond.min.js"></script> <![endif]- ->

截图
0赞 · 0采集
大赖 2017-09-26

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

截图
0赞 · 0采集
qq_Amo_0 2017-08-30

bootstrap要用的 <meta name="viewport" content="width=device-width,initial-scale=1.0">

截图
0赞 · 0采集
潘东东 2017-08-28

<!- -以下2个插件是用于在IE8支持HTML5元素和媒体查询的，不用可移除- -> <!- - Respond.js不支持file://方式访问- -> <!- -[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/htmlsshiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/reapond.min.js"></script> <![endif]- ->

0赞 · 0采集
慕瓜5189485 2017-08-10

<!- -以下2个插件是用于在IE8支持HTML5元素和媒体查询的，不用可移除- -> <!- - Respond.js不支持file://方式访问- -> <!- -[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/htmlsshiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/reapond.min.js"></script> <![endif]- ->

0赞 · 0采集
Yvette小公举 2017-07-06

bootstrap必须加入此meta标签

截图
0赞 · 0采集
qq_阑的追忆_0 2017-06-22

响应式布局之bootstrap框架： 1、是一种移动优先的前端框架；不仅可以帮助解决低端浏览器不支持css3的问题，同时解决了不同分辨率上网页布局的展示 2、优点：写非常少的代码，即可实现多终端的页面适配； 3、源文件主要有两部分构成，即CSS,JS和font字体； 4、bootstrap的源代码是Less文件，不改变源代码的情况下可以直接下载编译后的文件； 5、几乎支持所有浏览器，对于IE8/9需要引入Respond.js文件激活IE8/9对Media Query的支持； 6、最好把respond.js和网站部署在同一个域名下，避免出现跨域问题

截图
2赞 · 2采集
qq_阑的追忆_0 2017-06-22

bootstrap的搭建必须要有个meta标签 initial-scale：默认缩放，用于展示网页的设备的合适范围大小还有一个respond的问题

截图
0赞 · 0采集
小神神 2017-06-19

重点}响应式布局之bootstrap 1、Bootstrap重要特征一套完整基础的CSS插件丰富的预定义样式表一组基于jQuery的JS插件集崇尚移动(Mobile First)先行，非常灵活的响应式(Responsive)栅格系统 2、Bootstrap官网: www.getbootstrap.com 或直接在GitHub网站上在线阅读源码，目录分别是js和less ---- http://github.com/twbs/bootstrap 3、HTML标准模板 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 默认情况下，UI布局的宽度和移动设备的宽度一致，缩放大小为原始大小 <!- -bootstrap - -> <link href="css/bootstrap.min.css" rel="stylesheet"> <!- -以下2个插件是用于在IE8支持HTML5元素和媒体查询的，不用可移除- -> <!- - Respond.js不支持file://方式访问- -> <!- -[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/htmlsshiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/reapond.min.js"></script> <![endif]- -> <!- -如果使用Bootstrap的JS插件，则必须引入jQuery- -> <script src="https://code.jquery.com/jquery.js"></script> <!- - Bootstrap的js插件- -> <script src="js/bootstrap.min.js"></script>

0赞 · 0采集

数据加载中...