专栏首页李才哥Bootstrap 响应式框架 第一集
原创

Bootstrap 响应式框架 第一集

Bootstrap 框架 , 响应式

1、什么是响应式

响应式:Responsive Web Page,又称为自适应网页,一个页面既可以在PC浏览器中正常访问,也可以在手机/平板中正常访问。而且会配合不同的设备有不同的显示结果。

响应式网页的特点:

1、页面上的图片和文字要随着屏幕的尺寸而发生改变

2、页面的布局也会随着屏幕的尺寸而发生变化

2、如何测试响应式的网页

1、使用真实的物理设备

优势:测试结果真实可靠

不足:设备太多,成本太大,测试任务量大

2、使用第三方的模拟设备

优势:无须添加更多设备

不足:效率偏低,会有结果偏差

3、使用浏览器自带的设备模拟器(Emulator)

优势:简单,功能丰富

不足:会有结果偏差

3、视口 - Viewport

IOS中的Safari中提出的概念

在移动设备中,浏览器里显示网页的一块区域(PC端会忽略此概念)

视口的尺寸:

1、在IE中 :宽度是 1024px

2、非IE中 :宽度是 980px

对于响应式的网页,要设置的视口信息如下:

1、视口的宽度:与设备的物理宽度保持一致

2、视口的初始化缩放倍率:原始大小(不缩放显示)

3、不允许用户手动缩放视口的大小 :不允许手动缩放网页

在HTML中指定视口信息:

<meta name="viewport" content="">

1、视口的宽度 : width

取值:

1、device-width

2、具体数值

2、视口的初始化缩放倍率:initial-scale

取值:

以数字来表示缩放倍率

取值为 1 的话,表示原始大小显示

3、手动缩放视口大小:user-scalable

取值:

1/0/yes/no

1 和 yes :表示允许手动缩放视口大小

0 和 no :表示不允许手动缩放视口大小

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

以上代码,移动端响应式必备!!!

4、如何编写响应式网页(重点)

1、必须声明视口(已解决)

2、文字尽量使用相对尺寸(em,rem),尽量不用绝对尺寸(px,pt)

em:使用当前元素父元素文字大小的倍数

rem:使用当前网页根元素(html)定义的文字大小的倍数

3、容器元素尽量使用相对尺寸(%,auto),尽量不用绝对尺寸(px)

4、图片元素尽量使用相对尺寸(%,auto),尽量不用绝对尺寸(px)

img{

width:50px;/*不推荐:绝对尺寸*/

width:50%;/*推荐:占父元素宽度的50%*/

max-width:50%;/*推荐:占父元素宽度的50%,但最大不能超过图像本身的大小*/

}

ex:

1.jpg 的图像 100px * 100px ,将其放在 80px*80px 元素内,将 1.jpg 的max-width:50%;的话,1.jpg 显示宽度 40px * 40px

如果将1.jpg 放在 800px * 800px 元素内,将1.jpg 的max-width:50%;的话,1.jpg显示宽度为 100px*100px

如果将1.jpg 放在 800px * 800px 元素内,将1.jpg 的width:50%;的话,1.jpg显示宽度为 400px*400px

5、页面元素尽量使用流式布局

流式布局的特点:

1、元素默认是靠向容器的左上方开始排列的

2、横向排列,排列不下时则换行

方法1:float

方法2:display:inline-block;

方法3:弹性布局 要 配合着 flex-wrap:wrap;

6、响应式网页都要使用CSS3 Media Query的技术来判断设备的尺寸 - 最重要

ex:

1、设备的宽度 w <= 767px 背景色 红色

2、设备的宽度768px<=w<=991px背景色 绿色

3、设备的宽度w>=992px 背景色为 粉色

5、CSS3 Media Query

CSS3 媒体查询技术

作用:可以根据不同的媒体类型以及特性去执行不同的CSS

语法:

通过 @media 的规则进行声明

@media MEDIA-TYPE and (MEDIA-FEATURE) and (MEDIA-FEATURE)

MEDIA-TYPE : 媒体类型

取值:

1、all,默认值,表示所有设备

2、screen :屏幕(PC , PAD , PHONE)

3、tv :电视设备

MEDIA-FEATURE : 媒体特性(属性)

取值:

1、width :指定浏览器宽度大小

2、min-width :判断指定浏览器窗口宽度最小值

3、max-width :判断指定浏览器窗口宽度最大值

ex:

1、在屏幕(PC,PAD,PHONE)下,宽度在767px以内,将body的背景色改为 红色

@media screen and (max-width:767px){

body{

background:red;

}

h1{

font-size:1.5em;

}

}

2、在屏幕(PC,PAD,PHONE)下,宽度在768~991之间,将body的背景改为 绿色

@media screen and (min-width:768px) and (max-width:991px){

body{

background:green;

}

h1{

font-size:1.8em;

}

}

3、在屏幕(PC,PAD,PHONE)下,宽度在992px以上,将body的背景色改为 粉色

@media screen and (min-width:992px){

body{

background:pink;

}

h1{

font-size:2em;

}

}

@media 具体使用:

1、有选择性的执行CSS片段中的内容

<style>

@media screen and (min-width:768px){

}

@media screen and (max-width:767px){

}

</style>

2、有选择性的执行某个外部CSS文件

<link rel="" href="1.css" media="screen and (min-width:768px)">

当屏幕的尺寸在768px以上时,执行1.css中的内容

不足:即使不满足当前设备条件的CSS也会被请求,但不会被执行

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue学习总结----图示版1.0

    杂而不精的生活似乎总是要被人们吐槽,没那么丰富,也没那么平凡,像是一个瞎折腾的人生,有很多事情做,又整日无所事事的样子。这样的日子自己总算过得舒坦,...

    李才哥
  • 不要以自己的怀疑,认定他人的思想,不要猜疑他人,否则只会影响彼此间的情谊

    有时候我们低头,是为了看准自己走的路,很多人认为,自己已经过得还可以,不愿意去尝试新鲜的事物,很多东西都放不下,拉不下这个脸,最终死在面子上。

    李才哥
  • This license K71U8DBPNE has been cancelled

    webstorm可以说是灰常好用了,但是webstorm编译器是需要破解的,下面就是webstorm的破解方法webstorm 作为最近最火的前端开发工具,也确...

    李才哥
  • IOS下box-shadow的诡异bug的修复

    先说环境,我测试了两台IOS手机,iphone 8 ios 11.4.1 和 iphone 6s plus ios 11.4.1,都存在这个诡异的bug。

    用户1515472
  • 一个CSS画的灰太狼,IE下属于重口味,慎看!

    还有几个不错的,比如一个小日本制作的多啦A梦,一个Twitter的当机页面等等,大家可以搜下看看.不得不感叹做前端的哥们闲起来还真是可怕啊.Firefox是正常...

    练小习
  • 转一个css3绘制的iPhone6

    css3绘制的iPhone6 <!DOCTYPE html> <html> <head> <title></title> <style type...

    练小习
  • 伪类以及伪元素的一些使用小技巧

    在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

    练小习
  • CSS3绘图实战-Nut团队标志

    css每一代都会有革命性的更新,尽管目前还有一部分浏览器没有支持CSS3,就算支持也是部分支持。但是她那强大的能力依然还是让我兴奋,一些早期不敢想象的东西,如今...

    练小习
  • JQuery笔记(二) animate支持的属性

    以常见的图片切换效果对animate的动画做了实验,用了两种方式,一种是修改相对位置,一个是修改背景的位置,结果第一种可以,第二种失败。 <!DOCTYPE h...

    用户1075292

扫码关注云+社区

领取腾讯云代金券