一.响应式页面-@media介绍 1.css3的@media查询 　　定义和使用 　　使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小 ...

响应式页面 移动端单位 Bootstrap相关内容 ... 响应式页面-@media介绍 我们为什么要写自适应的页面（响应式页面） 众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱 ...

响应式开发 （就是利用媒体查询针对不同宽度的设备进行布局和样式的设置，从而设配不同设备的目的） 响应式布局容器响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果 原理：不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下 ...

关键词：viewport、栅格布局、媒体查询（Media Queries）一、关于栅格布局的说明： 1、基本图解extra small devices phones 超小型设备手机small devices tablets 小型设备平板电脑medium devices desktops 中型 ...

本文主要写给刚接触移动端开发的同鞋们。 首先先将几个主要概念讲一下； 什么是移动端？ 移动端故名思义是为移动终端，大名叫移动通信终端，是指可以在移动中使用的计算机设备。其实就是我们常说的手机。 什么是布局？ 前端开发中布局是将主要的html结构布置好。 rem是什么？ rem是一种 ...

一、Bootstrap简介 Bootstrap是Twitter于2011年8月在Github上发布的的开源产品，目前最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备有限的WEB项目。将常见的CSS布局组件和JavaScript插件进行了整合并完善的封装，能让没有经验的前端工程师 ...

使用Bootstrap也非常简单,你只需要把下面的链接添加到你需要使用Bootstrap来进行布局的应用的头部： <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css ...

说明： 1. 响应式导航栏，就是右上角的三道杠，点一下下方出现隐藏的导航栏。如果屏幕够大就显示所有的导航选项，如果屏幕小比如手机，就显示部分，剩下的放到三道杠里隐藏。 2. 外面套一个大的div，其实建议用nav标签，语义化一点呗！类名是navbar，说明这是个导航条，如果不带，后面的内容 ...