移动web适配的方式
方式一：采用rem+vw方式进行适配
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
}
}
例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>h5小页面</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style type="text/css">
html {
font-size: 16px;
}
a{
text-decoration: none;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
}
}
.item-section {
min-height: 100%;
background-color: #fefefe;
font-size: 12px;
}
.item-section ul {
padding: .133333rem;
}
.flag {
display: table;
margin-bottom: 1px;
background-color: #f3f7f7;
width: 100%;
}
.flag-item {
display: table-cell;
padding: .16rem 0;
vertical-align: top;
background-color: #fff;
}
.figure {
width: 7.2rem;
height: 7.2rem;
}
.figure img {
width: 7.2rem;
height: 7.2rem;
vertical-align: top;
}
.flag .flag-item.figcaption {
width: 133.333333rem;
padding-left: .2rem;
padding-right: .2rem;
position: relative;
}
.flag-price {
padding: .15rem 0 .2rem;
}
.flag-price span {
display: inline-block;
background-color: #dd1111;
font-weight: 700;
color: #fff;
vertical-align: middle;
border-radius: .026667rem;
padding: .026667rem .08rem .013333rem;
margin-right: .066667rem;
font-size: 11px;
}
.flag .flag-title a {
color: #333;
line-height: 1.25;
overflow: hidden;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
display: -webkit-box;
display: box;
}
.flag .flag-price strong {
display: inline-block;
vertical-align: middle;
font-weight: 700;
color: #ee0a3b;
font-size: 16px;
margin-right: .16rem;
}
.flag .flag-price small {
display: inline-block;
vertical-align: middle;
font-weight: 700;
color: #ee0a3b;
font-size: 12px;
}
.flag .flag-type {
color: #ff3600;
}
.flag-btn {
position: absolute;
width: 4.133333rem;
height: 1.24rem;
line-height: 1.24rem;
background-color: #ee0a3b;
text-align: center;
color: #fff;
font-weight: 700;
font-size: 14px;
bottom: .133333rem;
right: .2rem;
border-radius: .026667rem;
}
</style>
</head>
<body>
<div class="item-section">
<ul>
<li class="flag">
<div class="flag-item">
<a href="" title="漂亮的小姐姐" class="figure figuration"><img src="data:images/face01.jpg" alt="漂亮的小姐姐" /></a>
</div>
<div class="figcaption flag-item">
<div class="flag-title"><a href="#">胡椒粉</a></div>
<div class="flag-price">
<span>双11价</span>
<strong>￥12</strong>
<small>(满400减100)</small>
</div>
<div class="flag-type">
促销
</div>
<a href="javascript:void(0)" class="flag-btn">买一送一</a>
</div>
</li>
</body>
</html>
结果：
方式2：采用阿里团队flexible.js库，原理是通过js来调整html的字体大小，根据不同的width给网页中html跟节点设置不同的font-size，然后所有的距离大小都用rem来代替。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta name="description" content="不超过150个字符" />
<meta name="keywords" content="" />
<meta content="caibaojian" name="author" />
<title>flexible</title>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<style type="text/css">
.info-container {
margin-top: 0.2rem;
padding-left: 0.15rem;
}
.info-container p {
padding: 0.25rem 0 0.25rem 0.05rem;
color: #2a2a2a;
position: relative;
}
.info-container p:after{
content: '';
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid #336699;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
.content-container {
margin-top: .15rem;
line-height: 1.5;
padding: 0 .15rem;
text-indent: 2em;
text-align: justify;
flex: 1;
}
.item-section {
min-height: 100%;
background-color: #fefefe;
position: relative;
font-size: 12px
}
[data-dpr="2"] .item-section {
font-size: 24px
}
[data-dpr="3"] .item-section {
font-size: 36px
}
.item-section ul {
padding: .133333rem
}
.flag {
display: table;
width: 100%;
margin-bottom: 1px;
background-color: #fff;
}
.flag .flag-item {
display: table-cell;
padding: .16rem 0;
vertical-align: top;
background-color: #fff
}
.flag .flag-price strong {
display: inline-block;
vertical-align: middle;
font-weight: 700;
color: #ee0a3b;
font-size: 16px;
margin-right: .16rem;
}
.flag .flag-item.figcaption {
width: 133.333333rem;
padding-left: .2rem;
padding-right: .2rem;
position: relative
}
.flag .flag-item.figure {
width: 2.4rem;
height: 2.4rem
}
.flag .flag-item img {
width: 2.4rem;
height: 2.4rem;
vertical-align: top
}
.flag .flag-title a {
color: #333;
line-height: 1.25;
overflow: hidden;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
box-orient: vertical;
display: -webkit-box;
display: box
}
.flag .flag-price {
padding: .15rem 0 .2rem
}
.flag .flag-price span {
display: inline-block;
background-color: #ee0a3b;
vertical-align: middle;
border-radius: .026667rem;
padding: .026667rem .08rem .013333rem;
color: #fff;
font-weight: 700;
margin-right: .066667rem;
font-size: 11px
}
[data-dpr="2"] .flag .flag-price span {
font-size: 22px
}
[data-dpr="3"] .flag .flag-price span {
font-size: 33px
}
.flag .flag-price strong {
display: inline-block;
vertical-align: middle;
font-weight: 700;
color: #ee0a3b;
font-size: 16px;
margin-right: .16rem
}
.flag .flag-price small {
display: inline-block;
vertical-align: middle;
font-weight: 700;
color: #ee0a3b;
font-size: 12px;
}
[data-dpr="2"] .flag .flag-price strong {
font-size: 32px
}
[data-dpr="3"] .flag .flag-price strong {
font-size: 48px
}
.flag .flag-price small {
display: inline-block;
vertical-align: middle;
font-weight: 700;
color: #ee0a3b;
font-size: 12px
}
[data-dpr="2"] .flag .flag-price small {
font-size: 24px
}
[data-dpr="3"] .flag .flag-price small {
font-size: 36px
}
.flag .flag-type {
color: #ff3600
}
.flag .flag-btn {
position: absolute;
width: 2.133333rem;
height: .64rem;
line-height: .64rem;
background-color: #ee0a3b;
text-align: center;
color: #fff;
font-weight: 700;
font-size: 14px;
bottom: .133333rem;
right: .2rem;
border-radius: .026667rem
}
[data-dpr="2"] .flag .flag-btn {
font-size: 28px
}
[data-dpr="3"] .flag .flag-btn {
font-size: 42px
}
.fx {
display: flex;
flex-direction: column;
}
.flex {
display: flex;
flex-direction: row;
}
.fixed {
position: fixed;
left: 0;
bottom: 0;
width: 10rem;
background-color: #fff
}
.flex a {
text-align: center;
flex: 1;
color: #000;
justify-content: center;
align-items: center;
padding: .40225rem;
}
.flex a:nth-child(2){
background-color: red;
}
.flex .wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fixed:after{
content: '';
position: absolute;
top: 0;
left: 0;
border-top:1px solid #ebebeb;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
</style>
</head>
<body class="fx">
<!--文章封面-->
<div class="item-section">
<ul>
<li data-repeat="items" class="flag" role="link" href="#">
<a class="figure flag-item" href="javascript:void(0)"> <img src="data:images/face02.jpg" alt=""> </a>
<div class="figcaption flag-item">
<div class="flag-title">
<a href="javascript:void(0)" title="">胡椒粉</a>
</div>
<div class="flag-price">
<span>双11价</span>
<strong>¥12</strong>
<small>(满400减100)</small>
</div>
<div class="flag-type">
促销
</div>
<a class="flag-btn" href="javascript:void(0)">买一送</a>
</div>
</li>
</ul>
</div>
<!-- 正文 -->
<div class="info-container">
<p>北国风光</p>
<p>千里冰封</p>
<p>万里雪飘</p>
<p>望长城内外惟余莽莽</p>
</div>
<div class="content-container">
文人通医，由来已久。张仲景在《伤寒论》开篇的序言中旗帜鲜明地指出：“怪当今居世之士，曾不留神医药，精究方术，上以疗君亲之疾，下以救贫民之厄，中以保身长全以养其生。”文人士子作为中华文字的耕读者和文脉的传承者，讳疾忌医，鄙视中医，动辄以现代医学指标考量自己健康，不悟中国特色理法方药，实乃本末倒置，作茧自缚。悲哉，多由于现代医学的普及，人们的生活语境发生了极大改变，这不仅俘获了当下的时尚追求者，无疑也影响了现今的中医人。 文贵教化，医贵明理。读中医药书，走健康之路。现在是复兴东方中华文明，振兴中医药文化的大时代。崇文明理，包容进取，文者之美德，医者之幸事。知其然而知其所以然，标本兼治，全神养真之旨也。 君记否，《红楼梦》中的林黛玉，生得倾城容貌，兼有旷世诗才。由于每日里独自黯然神伤，郁郁寡欢，忧虑不食不寝，常卧目不瞑。学人、读者多关注的是“千红一哭，万艳同悲”的人物命运结局，和林黛玉身上闪烁 着的诗意和理想的光彩，以及充满叛逆的精神。而忽略了林黛玉的体质、脉证和因思念宝玉最终仙逝的缘由。中医说，林黛玉死于阴阳离绝，魂魄分离。西医可能就会跳出来口唾飞溅，非要拿出个片子来比划一番。这就是中西医在生命观认知上的不同之处，中医认为，人以天地之气生，四时之法成。西医则光有生理上的精虫和卵虫结合。因为秉持了这样的生命观，所以，也就造就了中国文化不一样的生命态度及其医学。葛洪在《抱朴子》中说：“人无贤愚，皆知己身有魂魄，魂魄分去则人病，尽去则人死。”《灵枢·本神》围绕脏腑“肝”阐述道：“肝悲哀动中则伤魂，魂伤则狂，妄不精，不精则不正，当人阴缩而挛筋，两胁骨不举，毛悴色夭，死于秋。”而明代李时珍的《本草纲目》有魂魄离体的更为详述的记载：“有人卧则有身外有身，一样无别，但不语，盖人卧则魂归于肝，此由肝虚邪袭，魂不归舍，病名离魂。用人参、龙齿、赤茯苓各一钱，水一盏，煎半盏，调飞过朱砂末一钱，睡时服，一夜一服，三夜后，真者气爽，假者即化矣。”中医讲，人有阴阳，心主神明，肝藏魂，肺藏魄。生命是三凑六合而成，这是从宇宙自然中得来的。中医有很特别的表述，尤其经络，无论从名相还是内涵，都是中医所独有的。西医一听，一头雾水，整个脑残。幸亏张仲景倡导六经辩证，力挽狂澜，使中医道统在存亡之际得以延续。 关于魂魄，祖国医学有更多记载。不只是现在俄罗斯、乌克兰等东欧国家破译并摄下了人体魂魄的真实存在，连清代鲍相敖的《重订验方新编》中也有离魂症的记载：“忽有人影，与己随行作卧，多则成形，与己无异。用党参五钱（脉有力者用人参一钱，或用高丽参三钱亦可），辰砂、茯苓各三钱，煎服数剂，形影不见。”张仲景在《金匮要略》中有“邪哭使魂魄不安者，魂魄妄行，阴气衰者为癫，阳气衰者为狂”之说。 《天元纪大论》曰：“心者，君主之官，神明出焉。”中医认为，养魂之法全在养心，“恬淡虚无，真气从之，精神内守，病安从来？”护心之法不仅要每个人培养坚强的意志，端正生命为贵的价值观。还要增强心包的功能，使心安而不惧。神与形俱，方能尽终天年。已经失魂者，古有道家招魂的仪式法术，现代人很少知道、相信。大概当下也只能从电视、视频中领略一二。中医使用艾灸神阙，针刺神门、人中等穴位，亦能快速使人回神。道家医学认为：人有三魂七魄。魂，是能离开人体而存在的精神；魄，为依附形体而显现的精神。三魂夜晚藏于肝，本当静养休息，但是如果各种原因搅扰神魂，就会出现魂不附体，出现难以入睡、早醒的症状，或魂魄飞扬，出现多梦浅睡的问题。有人整宿无眠，睁着眼睛到天亮，时间长了，就痛不欲生，唯求一死，但得自由。用中医的话说，其实，就是肝肺不和，肝火犯肺，魂魄不得交替，有动无静而已。儒家谓人亦有魂魄，《左传·昭公二十五年》曰：“心之精爽，是谓魂魄；魂魄去之，何以能久？”《左传·昭公七年》则详尽了魂魄的物质形态：“人生始化曰魄，即生魄，阳曰魂；用物精多，则魂魄强。”过去医家判断病人可治不可治的标准也是看人有神无神。人之魂“胎光”若泯灭，就是司命之所属的扁鹊、华佗亦无能为力。道家认为，人神沟通天地鬼神谓之灵应、灵验。胎光是人生命力和自愈能力的源泉，即所谓的魂。也即看肝的功能状态好与坏。现代医学也认为肝是人体最大的解毒器官。胎光就是生命之光故称神明，是人最宝贵的。( 文章阅读网：www.sanwen.net ) 《灵枢·本神》曰：“喜乐无极则伤魄。”养魄之道全在调息，魄藏肺中，有意识地掌握呼吸方法，调节呼吸的节奏，有利于安抚、养魄。中医里肛门又称魄门，其实，人们有意识地做提肛动作，生活中未尝不是存魄的好方法。 中医认为，肝主升发,肺主肃降,肝升肺降则气机调畅,气血上下贯通,所以二者的关系,主要表现在人体气血的升降运行上。太极健身爱好者、气功锻炼者对此应该感知最为明显。而中医方药中，如人参、茯神、琥珀、龙骨、龙齿、龙眼肉、朱砂、女贞子、磁石、生铁落等，都有安精神、定魂魄或养魂魄的作用。比如，现代都市人普遍患有焦虑症和伴有失眠的问题，而现在的《中医内科学》教材条分缕析将失眠分成若干型，从《黄帝内经》看，它就是一个阳不入阴的问题。阳不入阴怎么办？祖国医学早有答案，从阴引阳就能攻破。完全可以通过厥阴去引阳，比如刺太冲、内关、大棱、劳宫等穴，或者可以从少阴去引阳，比如刺通里、神门、涌泉等穴，甚或还可以从太阴去引阳，比如刺鱼际、太白、公孙，至简的思路，若是三阴同刺，中医穴位一个三阴交足矣。 医学界普遍认为，睡眠是人类最好的养生。人体五脏六腑都有自己的工作时间安排，主魂的肝经当令时间在凌晨1-3点，人熟睡时，肝要藏血、排毒，文人此时间段熬夜从事创作会累及肝脏。肺经当令，中医认为在凌晨3-5点，正值人们进入深度睡眠时候，一定要让人之魄安歇。魂安魄驻，翌日，人醒来才会精神饱满，思维敏捷。 济世救人，从文兼医。文人的魂魄，乃中国文化延续和复兴的真正根基。《四库全书总目提要》曰：“惟儒者能明其理，而事亲者当知医也。”因了文人知识结构的完备和知识的渊博，以及文人对证（症）的思路、表述较常人完整、规范，故文人从医，自有兼及医学轻车熟路的便捷、优势。医者意也，在人思虑，定魂魄。文人咬文嚼字的功夫纯熟了，搞中医，自是水到渠成的事。俗话说，秀才学医，如笼捉鸡。其实，就看文人的初心，文人振兴中医的魂魄、担当。
</div>
<footer>
<div class="fixed">
<div class="wrap flex">
<a href="javascript:void(0)">咨询</a>
<a href="javascript:void(0)">购买</a>
</div>
</div>
</footer>
</body>
</html>
结果：
移动web适配的方式相关推荐
- java部署web service的方式
部署web service的方式一般有两种: 1. 编写java源文件,将文件的java后缀改为jws,然后部署到webapps/axis目录下,axia引擎可以直接执行源文件中定义的java方法为w ...
- python四大软件-传智播客解析Python之移动端页面适配四大方式
前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?传智播客为此总结了四种方式,具体如下: 传智播客解析Python之移动端页面适配四大方式 ...
- Spring整合Struts2框架的第一种方式（Action由Struts2框架来创建）。在我的上一篇博文中介绍的通过web工厂的方式获取servcie的方法因为太麻烦，所以开发的时候不会使用。...
1. spring整合struts的基本操作见我的上一篇博文:https://www.cnblogs.com/wyhluckdog/p/10140588.html,这里面将spring与struts2 ...
- php 登录安全认证,介绍几种常用的web安全认证方式
本文为大家介绍了五种常用的web安全认证方式,具有一定的参考价值,希望能对大家有所帮助. 1.Http Basic Auth 这是一种最古老的安全认证方式,这种方式就是简单的访问API的时候,带上访问 ...
- 常见web登陆授权方式及原理
文章目录 前言 一些准备 了解下HTTP协议的特点 什么是HTTP协议? 一个HTTP请求包含了什么信息? 一个标准的HTTP服务器响应是怎样的? HTTP 协议的特点 如何在Chrome中查看请求头 ...
- 如何登录无线web认证服务器,路由器如何设置web认证的方式连接免费WIFI
现在大部分酒店商城餐厅等提供的免费WIFI都会使用WEB认证的方式连接无线WIFI:推广商品广告和宣传品牌信息等:web 现在大部分酒店商城餐厅等提供的免费WIFI都会使用WEB认证的方式连接无线WI ...
- Netdata 是一款 Linux 性能实时监测工具，以web的可视化方式展示
Netdata 是一款 Linux 性能实时监测工具..以web的可视化方式展示系统及应用程序的实时运行状态(包括cpu.内存.硬盘输入/输出.网络等linux性能的数据). Netdata文档地址: ...
- java web常用权限方式,java web项目的几种权限控制方法
一.spring boot项目,使用@Configuration注入WebMvcConfigurer来实现拦截器 如: @Configuration public class HighersoftWe ...
- Web页面布局方式小结
Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...
最新文章
- XML(eXtensible Markup Language)文件的解析
- LIST 和 MAP
- pytorch torch.nn.MSELoss(size_average=True)（均方误差【损失函数】）Mean Squared Error（MSE）、SSE（和方差）
- 浅析去中化区块链游戏资产交易平台
- 碰到一个微软的bug：CWinAppEx::GetString
- python算法常用技巧与内置库
- qt控制程序打开记事本_Qt 记事本程序
- 「期末」微机原理复习速成（上）
- h3c交换机配置教程命令（新手配置交换机详细教程）
- 计算机考试模拟软件双击为什么打不开,win7系统双击“计算机”打不开的解决方法...
- 阿里巴巴集团CTO张建锋：将开放阿里的技术能力
- 思念绵绵，爱在彼此心间漫延
- pixi.js淘宝小程序快速上手指南
- 无限火力机器人一拳流出装_LOL无限火力再出赖皮套路，机器人无限击飞，需要两件装备！...
- 使用uniapp编写词霸每日一句页面
- 账号密码的注册、登录、修改和注销
- 博士申请 | 卡耐基梅隆大学陈贝迪老师课题组招收机器学习方向博士生
- 死亡之雨新的僵尸病毒中文破解版 v1.0绿色免安装版
- JavaScript通信之Ajax
- 追风去，不如造风来——致敬蚂蚁区块链创新大赛中的参与者们