【BootStrap2学习日记3--响应式布局实用类】的更多相关文章

BootStrap2学习日记3--响应式布局实用类

BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅在 PC电脑显示 我们来看下面这个例子: <div class="container"> <div class="row"> <div class="span4"> <h1 class="page-…

【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）

原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的px所对应的物理像素是不同的,css像素并不是一个固定宽度. 如设计稿总宽100px,屏幕视窗物理像素1000px,如果要设置设计稿沾满屏幕,那么css中设置的1px=1000/100物理像素. 因此通过一套样式,是无法实现各端的自适应.由此我们联想: 如果一套样式不行,那么能否给每一种设备各一套不…

bootstrap3学习1：响应式布局layout

在去年的这个时候写过关于bootstrap的相关文章(见:bootstrap2学习1:基本CSS样式),然后就搁置了,原因是因为当时对bootstrap的了解不深,并且当时v2版本对响应式设计的不是非常好.如今,bootstrap的v3版本很早就出来了,现在又拿出来老调重弹一次. 这次学习bootstrap,希望是一次比较深入的了解bootstrap,但愿能够在实际开发中运用的得心应手.学习的步骤大致根据bootstrap的中文翻译文档(见参考资料)来,但也有部分地方会深入或者浅出. 1.像素宽…

BootStrap2学习日记2--将固定布局换成响应式布局

概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @media(min-width:767px){body(background:red)} /*当浏览器宽度小于767px的时候采用 */ @media(max-width:767px){body(background:red} /*当浏览器宽度大约767px小于960px的时候采用 */ @media(min-wid…

CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &…

HTML5学习总结-番外05 响应式布局

1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加舒适的界面和更好的用户体验. 2.优缺点 优点: 1) 面对不同分辨率设备灵活性强 2)能够快捷解决多设备显示适应问题 缺点: 1)兼容各种设备工作量大,效率低下 2)代码累赘,会出现隐藏无用的元素,加载时间长. 3 语法 CSS3 media queries的语法如下, @media only s…

CSS学习笔记——响应式布局

响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.也就说一个页面可以在多个终端呈现出你想要的效果,能够兼容各个终端. 响应式布局的优缺点 优点: 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 根据不同的显示器调整设计最适合用户浏览习惯的页面缺点: 兼容各种设备工作量大,效率低下 代码累…

[学习笔记]viewport定义，弹性布局，响应式布局

一,移动端宽度设置viewport视图窗口,<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">,视窗宽度=设备宽度,默认缩放=1,不允许用户缩放. 二,flexbox,弹性盒子模型:1,在元素的css中添加display:-webkit-flex就可以转换成弹性盒模型了,然后在多个子元素的CSS中添加flex:1/2/3,就可以让子元素按…

[html5] 学习笔记-响应式布局

1.响应式布局介绍 响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供更加舒适的界面和更好的用户体验. 优点:面对不同分辨率设备灵活性强.能够快捷解决多设备显示适应问题 缺点:兼容各种设备工作量大,效率低下:代码累赘,会出现隐藏无用的元素,加载时间长 2.响应式布局的实现 CSS中的Media Query(媒介查询):设备宽高:device-width , devic…

CSS3学习笔记--media query 响应式布局

语法:@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种媒体类型之一).然后用 and 关键字来连接条件(其他关键字还有 not, only,看字面大家能理解,就不多说.),然后括号里就是一个媒体查询语句,稍微懂点css的同学都能看懂,这个条件语句意思是在大于320小于479 的分辨率下所激活的样式表. 一般大于960的显示器都可以用默认样式而不必在媒体…