我模拟了一个QQ音乐的radiostation页面，用了媒体查询以及流式布局，页面大部分内容是js根据json生成的，使用了less来编写css样式表。

下面是仓库地址，感兴趣的小伙伴可以打开看看，将浏览器横向伸缩成不同大小可以看到页面适配效果。

https://yummylucky.github.io/qqMusicRadioStation/radioStation.html#modleTitle_5

页面适配的小栗子 - github的更多相关文章

  1. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  2. 【Puppeteer】puppeteer安装/常用的方法以及一个小栗子(Youtube油管自动评论)

    这里介绍的是Win平台的安装方法,其他平台请至Github>Puppeteer. 首先要安装node.js 可以看我这篇的开头>[Angular]学习笔记-环境部署.项目建立相关 1.新建 ...

  3. 【原】让H5页面适配移动设备全家 - 设计师篇 - PPT

    上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...

  4. cookie小栗子-实现简单的身份验证

    关于Cookie Cookie是一种能够让网站Web服务器把少量数据储存到客户端的硬盘或内存里,或是从客户端的硬盘里读取数据的一种技术. 用来保存客户浏览器请求服务器页面的请求信息,可以在HTTP返回 ...

  5. h5页面适配小结

    大概是去年的7月想写这个内容去加深自己的理解.现在终于回来补上这篇入门小结了. 1.问题描述 适配的目标:在不同尺寸的手机设备上,页面“相对性的达到合理的展示(自适应)”或者“保持统一效果的等比缩放( ...

  6. SpringBoot+Shiro+Redis共享Session入门小栗子

    在单机版的Springboot+Shiro的基础上,这次实现共享Session. 这里没有自己写RedisManager.SessionDAO.用的 crazycake 写的开源插件 pom.xml ...

  7. SpringBoot+Shiro入门小栗子

    写一个不花里胡哨的纯粹的Springboot+Shiro的入门小栗子 效果如图: 首页:有登录注册 先注册一个,然后登陆 登录,成功自动跳转到home页 home页:通过认证之后才可以进 代码部分: ...

  8. Particle 粒子效果使用(适配微信小游戏，particle is not defined)

    在微信小游戏中使用粒子效果 参考: 1. 粒子库下载地址 2. 粒子官方使用教程 3. 水友解决微信小游戏particle is not defined 一.下载第三方库 Git地址:https:// ...

  9. java网络爬虫爬虫小栗子

    简要介绍: 使用java开发的爬虫小栗子,存储到由zookeeper协调的hbase中 主要过程是模拟Post请求和get请求,html解析,hbase存储 源码:https://github.com ...

随机推荐

  1. mvc模式的理解

    一开始总是觉得dao层和service层没有区别,甚至觉得service层根本就是多余的,service层就是把dao层的内容调用了一下,然后重写了一次,后来才理解到,dao层是数据链路层,是与数据库 ...

  2. oo第三次总结

    一．(1)规格化设计的大致发展历史 20世纪60年代,随着大容量.高速度的计算机出现,以及大量语言的新增和软件的不可靠,爆发了所谓的“软件危机”.而针对这个问题,人们提出了规格化设计的解决方法.通过把 ...

  3. PHP 简易聊天室 利用redis的订阅发布功能

    demo:http://www.200ok.fun:8083/api/chat/list 前言:这个种方式太耗redis连接数,每次订阅都会新起一个进程,仅供练手使用,切勿用于生产环境. 原理:1.P ...

  4. instrument之Xcode Analyze 代码静态检查及问题解决

    Static Code Analysis(静态代码分析)用来发现源代码潜在的错误与缺陷,源代码编译后只有在运行时有可能会产生细微的错误,他们可能难以识别和修复,所以这些潜在的威胁在开发过程中一定要尽可 ...

  5. jedis & common pool

    http://mvnrepository.com/artifact/redis.clients/jedis http://mvnrepository.com/artifact/org.apache.c ...

  6. 插值代码17个---MATLAB

    函数名 功能Language 求已知数据点的拉格朗日插值多项式Atken 求已知数据点的艾特肯插值多项式Newton 求已知数据点的均差形式的牛顿插值多项式Newtonforward 求已知数据点的前 ...

  7. 快递单号自动识别接口API-trackingmore

    一.快递单号自动识别接口功能说明 (1)PC电脑端.移动APP或者自建网站集成物流查询功能时,只需要用户输入单号即可,不需要输入快递公司. (2)此接口可以配合Trackingmore的快递查询API ...

  8. ajax阻挡设置

    在请求时候设置一个变量为false的.请求方法时候用他的值判断是否在请求中,如果是true就是有请求了,就直接return ,不执行后面的方法, 如果是没有请求,就让值为true,然后开始执行ajax ...

  9. 自定义bash提示符

    http://adamcavendish.is-programmer.com/posts/35659.html

  10. python之单例模式

    #单例模式:有时需要写出高性能的类,那么会采用单例模式.通俗的解释就是类只创建一次实例,贯穿整个生命周期,实现了高性能. #1.模块化单例#所谓的模块化就是一个单独的.py文件来存储类,这样就是单例模 ...