一个简单demo通过em实现‘响应式设计、em、文字图标svg’
大多数网站所谓的响应式设计,只是在不同大小屏幕上能正常显示罢了,在大屏幕上显示全部页面,在小屏幕上隐藏一部分不重要的页面,这样的响应式设计 只是为了兼容pc和移动,但在移动上的效果却是很不理想的,隐藏掉的页面内容虽然不能看到,但却同页面一起加载,浪费资源流量,想想那蛋疼的3G能访问这 样的响应式网页吗!
你见过一个网页在不同屏幕上是“等比缩小、等比放大”的响应设计吗?不管是文字大小,图片大小,所有的一切都是等比的!请不要惊讶,其实这只是一点雕虫小技,但作为一个前端工程这必须是基础知识了,首先点击下面demo试试吧,拖动浏览器大小测试一下:
http://html5css3webapp.com/zw-dome/responsive/
响应设计css:我设置每100px屏幕宽度变化就给body一个相对应的em值,body是顶层节点,子节点继承相应的em值改变大小。
@media screen and (min-width: 1601px){
body{ font-size:2.2em} } @media screen and (min-width: 1501px) and (max-width: 1600px){ body{ font-size:2.1em} } @media screen and (min-width: 1401px) and (max-width: 1500px){ body{ font-size:2em} } @media screen and (min-width: 1301px) and (max-width: 1400px){ body{ font-size:1.9em} } @media screen and (min-width: 1201px) and (max-width: 1300px){ body{ font-size:1.8em} } @media screen and (min-width: 1101px) and (max-width: 1200px){ body{ font-size:1.7em} } @media screen and (min-width: 1001px) and (max-width: 1100px){ body{ font-size:1.6em} } @media screen and (min-width: 901px) and (max-width: 1000px){ body{ font-size:1.5em} } @media screen and (min-width: 801px) and (max-width: 900px){ body{ font-size:1.4em} } @media screen and (min-width: 701px) and (max-width: 800px){ body{ font-size:1.3em} } @media screen and (min-width: 601px) and (max-width: 700px){ body{ font-size:1.2em} } @media screen and (min-width: 501px) and (max-width: 600px){ body{ font-size:1.1em} } @media screen and (min-width: 401px) and (max-width: 500px){ body{ font-size:1em} } @media screen and (min-width: 301px) and (max-width: 400px){ body{ font-size:0.9em} } @media screen and (min-width: 201px) and (max-width: 300px){ body{ font-size:0.8em} } @media screen and (min-width: 101px) and (max-width: 200px){ body{ font-size:0.7em} } @media screen and (min-width: 1px) and (max-width: 100px){ body{ font-size:0.6em} }
页面css:
h1{ margin:0; padding:0} .zw{ display:block; width:100%; font-size:6em; color:#333; text-align:center; text-decoration:none} .zw span{ cursor:pointer; color:#063} .zw span:hover{ color:#C00} .p{ font-size:0.8em; color:#093; text-align:center; margin:0; padding:0; font-family:"微软雅黑", "黑体", "宋体"} .ul{ margin:1em 3%; padding:0; width:94%; border:.15em solid #ededed; list-style-type:none; border-radius:1em; background:#fff} .ul li{ margin:0; padding:0} .ul li a{ display:block; width:100%; line-height:2.5em; font-size:1.2em; color:#999; text-decoration:none; border-top:.15em solid #ededed} .ul li:first-child a{ border-top:none; border-radius:0.833em 0.833em 0 0} .ul li:last-child a{ border-radius:0 0 0.833em 0.833em} .ul li a:hover{ background:#063; color:#fff} .ul li a i{ margin:0 .8em}
要做到整个页面等比响应式,必须得所有关于大小的单位都用em代替px,或者百分比代替px
图片都是用文字图标实现,文字图标制作地址:http://www.flaticon.com/
转载于:https://www.cnblogs.com/zhp404/articles/4326740.html
一个简单demo通过em实现‘响应式设计、em、文字图标svg’相关推荐
- 分享一个非常有用的HTML5+CSS3响应式图片案例
随着Retina屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种 ...
- 响应式设计的十个基本技巧
为什么80%的码农都做不了架构师?>>> Responsive Design对于我来说一点都不陌生,从他在这个互联网出现的时候,就一直在观注他的成长,而且在w3cplus站上也 ...
- 转自CSDNattilax的专栏 :自适应网页设计 跟 响应式 设计的区别跟原理and实践总结...
响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 ...
- HTML5实践 -- 三步实现响应式设计
HTML5实践 -- 三步实现响应式设计 响应式web设计现在已经不是一个难事了,如果你还不熟悉他,可以参看我的文章<HTML5实践 -- 流式响应式设计>.如果你是一个初学者,可能响应式 ...
- 自适应设计与响应式设计
目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念. 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网 ...
- 如何固定最小宽度_如何使用更新的HTML和CSS函数创建响应式设计
除了使用媒体查询和现代css布局(如flexbox和grid)来创建响应式网站外,我们还可以做好某些被忽视的事情来制作响应式网站.在本文中,我们将探讨许多可用的工具(围绕html和css),从响应图像 ...
- 是时候复习一下响应式设计了
一. 什么是响应式设计 1.针对某些设备的某些特征可以由不同的样式,通过媒体查询对页面进行重构.响应式网站是一个设计理念,它是多项技术的综合体. 2.目的是一个网站能够兼容多个终端(电脑.手机.Pad ...
- 前端 什么是响应式设计
1.什么是响应式设计 也叫响应式布局,响应式开发 实现不同屏幕分辨率的终端上浏览网页的不同展示方式. 响应式布局是根据设备屏幕宽度不同适当调整标签显示的布局,从而在每种设备屏幕宽度下呈现的界面是不同的 ...
- 前端学习13:HTML响应式设计、计算机代码、语义元素
目录 HTML响应Web设计 一.什么是响应式Web设计? 1.流体网格 2.媒体查询 3.响应媒体 4.视口元标记 二.使用Bootstrap HTML计算机代码元素 HTML 语义元素 一.什么是 ...
最新文章
- 如何在JavaScript中切片和拼接数组
- android毛玻璃效果,Android 中实现毛玻璃效果
- 公安部全面查找改革开放以来失踪被拐儿童 失踪被拐儿童父母和疑似被拐人员快去采集DNA
- C++中cin、cin.get()、cin.getline()、getline()、gets()等函数的用法
- div 包裹_如何查看到达之前收到的包裹和邮件
- mysql设置用户权限
- 只用6张图教会AI识别物体,达摩院新方案大幅降低AI数据标注成本
- linux mask 特殊权限位,Linux 特殊权限
- LeetCode - 9. 回文数
- 微服务实战之Prometheus使用分享
- 嵌入式开发Verilog教程(三)——Verilog HDL基本语法汇总(上)
- 软件工程:数据流图,数据字典的画法,以及如何转化为软件结构图
- 大学毕业必须知道的东西:三方协议、报到证(派遣证)、干部身份
- 了解BigBoss之如何添加BigBoss的Cydia源地址
- SNKr:创造新的潮圈文化 将区块链与时尚潮流结合
- 挑选代表( 招商银行信用卡中心)
- mysql 去除逗号,MySQL查询删除字符串中最后一个逗号后的所有字符?
- 通信原理简明教程 | 物联网通信技术简介
- 《互联网时代》 第十集 眺望
- html js 修改img 图片不拉伸,Javascript防止图片拉伸的自适应处理方法