我模拟了一个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. [02-02 ]Java数据库链接范列

    /* 01 连接池版本的 数据库 连接管理工具,适合于并发场合 */ package cn.tedu.jdbc.day02; import java.io.InputStream; import ja ...

  2. 关于HTTP协议学习（二）

    一,目录结构 HTTP Cookie & Session HTTP Cache (缓存) 二,HTTP Cookie & Session 1. 我们看到的 cookie 我们通过浏览器 ...

  3. mayan游戏

    这道题超级好 就是我太菜了写了几个小时不算是debug了几个小时. 我只想出了几个小剪枝 可能是状态不太好吧 写完这道题真的是完美诠释了什么,叫做: 暴力出奇迹!!! 真的是太暴力了. 最多只移动5步 ...

  4. 初步学习python

    自计算机诞生以来,也伴随着计算机语言的诞生,现在,全世界的编程语言有600多种,但流行的编程语言也就20多种. Java和C一直占据着前两名.但是近年来伴随着人工智能的发展,Python发展迅猛,以其 ...

  5. model中的自动验证 $_validate $_auto

    普通模式: <?php class UserModel extends RelationModel{ /**自动验证**/ protected $_validate = array( /**ar ...

  6. Zookeeper节点增删改查与集群搭建（笔记）

    1.上传文件目录说明 上传的文件一般放在 /home/下 安装文件一般在 /usr/local/下 2. 安装zookeeper 2.1将zookeeper-3.4.11.tar.gz拷贝到/home ...

  7. spring-session 2.0 实现细节

    一. 前置知识 1. redis 在键实际过期之后不一定会被删除,可能会继续存留 2. 具有过期时间的 key 有两种方式来保证过期 一是这个键在过期的时候被访问了 二是后台运行一个定时任务自己删除过 ...

  8. python tkinter messagebox

    """messagebox消息框""" import tkinter as tk #导入messagebox import tkinter. ...

  9. LeetCode-7-反转数组-c#

    目前看到的网上的版本 都是用到数组的反转函数.对于代码实现的细节没给出 反转函数的想法没给出. 特在此补充. Reverse函数是从c#库源码中抠出的主要部分代码.主要是双端步进.交换,当然是o(1) ...

  10. zookeeper的使用demo（c#/java）

    Zookeeper 作为一个分布式的服务框架,主要用来解决分布式集群中应用系统的一致性问题,它能提供基于类似于文件系统的目录节点树方式的数据存储,但是 Zookeeper 并不是用来专门存储数据的,它 ...