Tachyons provides extensions (-ns, -m, and -l) to many of its classes to help you design for responsive layouts. This lesson walks you through designing for mobile first then adding a design for desktop.

<body>

    <p class="f1 b--solid b--none-ns">Mobile First</p>

    <p class="f1 b--none b--solid-m">Medium</p>

    <p class="f1 b--none b--solid-l">Desktop Second</p>

</body>

[CSS] Design for Mobile First with Tachyons的更多相关文章

  1. CSS Devices可以让你在线直接获取使用CSS写的Mobile外形。

    CSS Devices可以让你在线直接获取使用CSS写的Mobile外形. CSS Devices 彩蛋爆料直击现场

  2. CSS Architecture & CSS Design Patterns

    CSS Architecture & CSS Design Patterns BEM Block, Element, Modifier https://en.bem.info/methodol ...

  3. 《HTML&CSS design and build websites》学习笔记(1)

    Chapter 1: Structure Chapter 2: Text <head>表示标题,默认显示在第一行. <title>表示抬头,显示在浏览器的标签页,还有窗口栏. ...

  4. html&css入门详解

    本系列主要讲解html与css的知识点,因为是参考的英文版的<html&css design and build websites>,所以可能会有个人翻译理解上的差错,希望观者能够 ...

  5. PHP检测移动设备类mobile detection使用实例

    目前,一个网站有多个版本是很正常的,如PC版,3G版,移动版等等.根据不同的浏览设备我们需要定向到不同的版本中.不仅如此,我们有时候还需要根据不同的客户端加载不同的CSS,因此我们需要能够检测浏览设备 ...

  6. Dojo Mobile制定学习用品

    Dojo Mobile开展 App技术开发QQ群:347072638 技术咨询.APP定制开发联系邮箱:messageloop@qq.com 时代在演变.技术在革新.无论你接受不接受. 初识Dojo ...

  7. jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍

    jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...

  8. CSS starts

    I have not written any articles here since I graduated from my university. Now I begin to write down ...

  9. 一个经验丰富的网站建设程序员的CSS资料

    没有就不能活的 53 个 CSS 技术 对新手实用的 20 个 CSS 建议 快速编写更好 CSS 代码的 5 种方法 50+ 个 CSS 创意案例和教程 101 个 CSS 小贴士.教程和范例 CS ...

随机推荐

  1. golang 简单web服务

    1.golang print输入 package main import "fmt" func main() { fmt.Printf("Hello World!\n&q ...

  2. cocoapod卡在了analyzing dependencies

    尽管公司的项目没有使用cocoapod,可是有一些第三方库本身依赖其它第三方的库,而且是用cocoapod来管理这些依赖的.所以在使用某些第三方库时.还是须要用到cocoapod的.今天在github ...

  3. 35.Node.js GET/POST请求

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 在很多场景中,我们的服务器都需要跟用户的浏览器打交道,如表单提交. 表单提交到服务器 ...

  4. 如何应对DDOS网络攻击

      650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/a ...

  5. 深入了解Linux远程桌面

    本文转载于:http://www.linux521.com/2009/system/201004/11001.html 已发表在<网管员世界>2010年3月杂志             本 ...

  6. Ajax用法

    1.什么是 Ajax? Ajax,英文名 Asynchronous JavaScript and XML,也就是异步的 JavaScript 和 XML.它不是一门新的语言,而是一种使用现有标准的新方 ...

  7. js-轮播图的总结

    /*两种播放行为:(一种自动播放,一种控制播放),一个定时器控制. *一个定时器控制两种播放状态. * 布局说明:装图片的盒子足够宽,让图片左浮,排成一排,最后一张重新放置第一张. * 定时器里执行自 ...

  8. 关于使用toFixed()函数时报错"toFixed() is not a function"的问题

    toFixed()函数只有数字类型的参数才可使用,字符串类型的参数需用parseFloat或者parseInt转换后再使用

  9. GIS学习 Geoserver使用添加、删除、查询地图中的POI

    geoserverwfs:Querywfs:Deletewfs:Updatewfs:Insert  在geoserver自定义的地图中通过geoserver wfs 查询,删除,添加相关的POI. 相 ...

  10. Codeforces 559A Gerald&#39;s Hexagon 数三角形

    题意:按顺序给出一个各内角均为120°的六边形的六条边长,求该六边形能分解成多少个边长为1的单位三角形. 把单位三角形面积看做1,实际上就是求六边形面积.随便找六边形的三条互相不相邻的边,分别以这三条 ...