我模拟了一个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. Python函数部分(1)

    之前,我们编代码时程序遵循的原则是:根据逻辑从上至下实现功能,其往往用一大段代码来实现指定功能,开发过程中最常见的操作就是粘贴复制,也就是将之前实现的代码块复制到现需功能处.这种方式虽然可以应付一般性 ...

  2. java详细剖析

    1·类型加载主动初始化和被动初始化两种,通过访问静态变量或者给静态变量赋值都是可以使类初始化,如果有继承关系,所依赖的父类都会被动初始化. 2·如果在类的静态变量中添加final关键字,那这个变量就会 ...

  3. JQ基本选择器

    JQ选择器采用CSS和Xpath选择器语法规范,满足用户在DOM中快速匹配元素或元素集合. 1.JQ支持CSS1.CSS2.CSS3.不同版本的所有选择器,而早期的很多浏览器并没有完全支持CSS3版本 ...

  4. pycharm 激活方法

    方法一: 服务器激活 pycharm 安装: https://www.cnblogs.com/pyyu/articles/9210171.html 方法二: 密钥激活 pycharm 获取激活码 (密 ...

  5. Docker 私有仓库建立（加密和用户验证）

    (一)生成证书1.mkdir /certs2.cd /certs 3.生成自签名证书 sudo openssl req -newkey rsa:2048 -new -nodes -x509 -days ...

  6. 2018-2019-2 网络对抗技术 20165236 Exp5 MSF基础应用

    2018-2019-2 网络对抗技术 20165236 Exp5 MSF基础应用 一. 实践内容(3.5分) 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要 ...

  7. mac 安装robot framework报错：No matching distribution found for Pywin32

    运行  pip install robotframework-ride  ,出现以下错误 解决办法:修改Python的运行方式,需要32位的python运行 defaults write com.ap ...

  8. Hydra（爆破神器）

    PS:这款暴力密码破解工具相当强大,支持几乎所有协议的在线密码破解,其密码能否被破解关键在于字典是否足够强大.对于社会工程型渗透来说,有时能够得到事半功倍的效果.本文仅从安全角度去探讨测试,使用本文内 ...

  9. SqlServer xml类型 查询及操作

        2.xpath:    寻址语言,类似windows目录的查找(没用过dir命令的话就去面壁)                                   语法格式,这些语法可以组合为 ...

  10. 打开eclipse "Initializing Java Tooling"错误

    问题:打开eclipse初始化界面过程中弹出An internal error occurred during: "Initializing Java Tooling". java ...