引导中自适应屏幕的示例分析

引导是目前最受欢迎的前端框架,它是基于HTML, CSS, JAVASCRIPT的,它简洁灵活,使得网络开发更加快捷,它还有一个响应最好的网格系统,并且能够在手机端通用,而引导是使用许多可重用的CSS和JAVASCRIPT组件,可以帮助实现需要的几乎任何类型的网站的功能,此外,所有这些组件都是响应式的。

引导是基于HTML.css.javaScript开发的简洁,直观,强悍的前端开发框架,使Web开发跟家快捷能制作响应式网页。

<强>引导自适应:

引导根据屏幕大小吧设备分为超小屏幕,小屏幕,中等屏幕,大屏幕四种并把屏幕分为12列对应屏幕宽度为:

超小屏幕(手机):0 - 768 px对应设置类=col-xs-number
小屏幕(平板):768 - 992 px对应设置类=col-sm-number
中等屏幕(电脑):992 - 1200 px对应设置类=col-md-number
大屏幕(电脑):1200 px - ?对应设置类=col-lg-number

在chrome浏览器,元素窗口中会发现当屏幕宽度小于768时,只有com-xs-12生效。

<>强自适应:网页适应不同设备,用引导框架

<强>原理:是媒体(设备/浏览器)查询@media> @media  only  screen 以及(min-width: 0 px),以及(max-width: 480 px) { 　　身体{ 　　背景颜色:红色; 　　} 　　} 　　@media  only  screen 以及(min-width: 481像素),以及(max-width: 720 px) { 　　身体{ 　　背景颜色:绿色; 　　} 　　} 　　@media  only  screen 以及(min-width: 721 px) { 　　身体{ 　　背景颜色:蓝色; 　　} 　　}

<>强例二对块级元素p

& lt; ! DOCTYPE  html> 　　& lt; html> 　　& lt; head> 　　& lt; meta  charset=癠TF-8"祝辞 　　& lt; title> Insert  title  here 　　& lt;/head> 　　& lt; body> 　　& lt; style 类型=拔谋?css"比; 　　div { 　　浮:左; 　　}/* *小屏0 px - 768 px */@media  only  screen 以及(min-width: 0 px),以及(max-width: 768 px) { 　　.sm-12 { 　　宽度:100%; 　　} 　　}/* *大屏768 */@media  only  screen 以及(min-width: 768 px) { 　　.lg-6 { 　　宽度:50%; 　　} 　　} 　　 　　& lt;/style> 　　& lt; !——,两个样式不会同时生效,在小屏上sm-12生效,,宽度是100%在大屏上lg-6生效,width60% 　　css中标签分块级标记和行级标记,div是块级元素,——比; 　　& lt; div 类=皊m-12  lg-6"祝辞div1