<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <meta name="viewport" content="width=device-width, initial-scale=1"><!--viewport meta元素控制移动端浏览器的宽度和缩放。为了自适应设备的宽度，需要加入该行-->

     <title></title>

     <link href="css/demo1.css" rel="stylesheet" />

     <link href="css/pure-min.css" rel="stylesheet" /><!--将pure引入页面-->

     <link href="css/grids-responsive-min.css" rel="stylesheet" /><!--引入响应式pure的栅格系统-->

 </head>

 <body>

   <div class="pure-g" id="d1"><!--固定写法必须放在class=pure-g里面-->

       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div><!--单元格大小是分数-->

       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>

       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>

       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>

       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>

       <div class="pure-u-1 pure-u-sm-1-2 pure-u-md-1-3 pure-u-lg-1-6"><p>AAAA</p></div>

       <!--<div class="pure-u-1 pure-u-sm-2-5 pure-u-md-4-5"><p>AAAA</p></div>两个单元格相加要等于1

       <div class="pure-u-1 pure-u-sm-3-5 pure-u-md-1-5"><p>AAAA</p></div>-->

   </div>

 </body>

 </html>
 #d1 p{

     background-color:#0094ff;

     padding:50px;

     margin:10px;

 }

pure响应式布局的更多相关文章

  1. 响应式布局框架 Pure-CSS 5.0 示例中文版-上

    0. Pure-CSS 介绍 Pure CSS 是雅虎出品的 CSS 框架, 依托于Normalize.CSS,在不适用任何JS代码情况下即可实现响应式布局的轻量级框架,无依赖,体积小. 1. CDN ...

  2. 一步步开发自己的博客 .NET版 剧终篇（6、响应式布局 和 自定义样式）

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  3. web页面之响应式布局

    一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

  4. 移动Web之响应式布局的探讨

    响应式布局的探讨 响应式布局的两种方式 基于百分比的布局 例:Bootstrap 基于rem的布局 例:淘宝触屏版 这两种布局都需要依赖于CSS3的media query来设置布局断点(或者通过js监 ...

  5. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  6. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  7. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  8. 【Win10开发】响应式布局——AdaptiveTrigger

    接触过Windows10的童鞋已经知道Universal app不仅可以运行在pc上,还可以运行在mobile或者其他平台上.那么这样势必会带来一个问题,如何针对不同屏幕来进行布局适配.所以微软提供了 ...

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

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

随机推荐

  1. 文件格式——fastq格式

    fastQ格式 FASTQ是一种存储了生物序列(通常是核酸序列)以及相应的质量评价的文本格式. 他们都是以ASCII编码的.现在几乎是高通量测序的标准格式.NCBI Short Read Archiv ...

  2. p2921 Trick or Treat on the Farm

    传送门 题目 每年万圣节,威斯康星的奶牛们都要打扮一番,出门在农场的N个牛棚里转 悠,来采集糖果.她们每走到一个未曾经过的牛棚,就会采集这个棚里的1颗糖果.农场不大,所以约翰要想尽法子让奶牛们得到快乐 ...

  3. 主元素问题（Java）

    x称为一个长度为n的数组的a的主元素,如果这个数组里面等于x的元素的数目不少于n/2个. 例如,a={2,3,2,2,5,3,2,4,2},x=2就是这个主元素.给定包含n个元素的数组a,主元素问题就 ...

  4. HDU 5973 Game of Taking Stones (威佐夫博弈+高精度)

    题意:给定两堆石子,每个人可以从任意一堆拿任意个,也可以从两堆中拿相同的数量,问谁赢. 析:直接运用威佐夫博弈,floor(abs(a, b) * (sqrt(5)+1)/2) == min(a, b ...

  5. JAVA中判断char是否是中文的几种方法

    1.方法一 char c = 'a'; if((c >= 0x4e00)&&(c <= 0x9fbb)) { System.out.println("是中文&qu ...

  6. Windows10安装node.js，vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

  7. .Net Core中依赖注入服务使用总结

    一.依赖注入 引入依赖注入的目的是为了解耦和.说白了就是面向接口编程,通过调用接口的方法,而不直接实例化对象去调用.这样做的好处就是如果添加了另一个种实现类,不需要修改之前代码,只需要修改注入的地方将 ...

  8. 2018ICPC徐州区域赛网络赛G（VECTOR+SET，模拟）

    #include<bits/stdc++.h>using namespace std;int x,y;vector<int>v1,v2;long long solve(vect ...

  9. uva 10817（数位dp）

    uva 10817(数位dp) 某校有m个教师和n个求职者,需讲授s个课程(1<=s<=8, 1<=m<=20, 1<=n<=100).已知每人的工资c(10000 ...

  10. 快速搭建angular7 前端开发环境

    第一步:全局安装 Angular CLI (1)打开npm(终端)安装angular-cli 第二步:创造工作区和初始应用 (1)运行命令 ng new my-app 第三步:启动开发服务器 (1)c ...