摘要:移动端网页最大的特点是什么自适应不同尺寸的屏幕高大上的叫法响应式知道了自适应网页怎么做岂不是能很好解决问题了那么自适应网页怎么做呢网上关于这方面的文章有很多,我简单的整理一下。
移动端网页最大的特点是什么?自适应不同尺寸的屏幕!高大上的叫法:响应式!
知道了自适应网页怎么做岂不是能很好解决问题了?那么自适应网页怎么做呢?网上关于这方面的文章有很多,我简单的整理一下。
简单解释一下:
我规定“页面宽度 = 屏幕宽度,初始缩放比例为1,允许用户最大和最小伸缩比都是1,不允许用户手动缩放”
深入了解 viewport
始终贯彻能用css解决的坚决不用js
那么你想到了什么?媒体查询!@media 可以针对不同的屏幕尺寸设置不同的样式!
有了 @media 根据 每一个尺寸的屏幕设计一套样式表出来?!那岂不是写到吐血
除了 @media,我们还需要rem来配合使用。
大家应该知道em 是相对于父级元素来设置字体大小的,而我们的rem是相对于根元素的。
这一点很重要。所以我们只要在 @media 中设置不同屏幕尺寸的 根元素的字体大小即可。
我们以iPhone6两倍设计稿标注来制作网页。宽度为750px 设置如下:
html,body {font-size:100px;} /* 规定 1rem = 100px; * 我们就可以根据这个比例来设计制作出一套css样式表布局这个页面,这个页面在宽度为750px时就完美显示了。例如: */ header { width: 100%; // 宽度还可以结合百分百来使用 height: .98rem; // 高度为98px border-radius: .49rem; // 圆角为49px font-size: .24rem; // 字体为24px }步骤二、@media设置根元素的字体大小
重点来了,我们只需要使用@media来设置不同屏幕尺寸的 根元素的字体大小。主流设备设置如下:
@media only screen and (max-width:768px),only screen and (max-device-width:768px) { body,html { font-size: 104px; } } @media only screen and (max-width:750px),only screen and (max-device-width:750px) { body,html { font-size: 100px; } } @media only screen and (max-width:640px),only screen and (max-device-width:640px) { body,html { font-size: 85.33px; } } @media only screen and (max-width:600px),only screen and (max-device-width:600px) { body,html { font-size: 80px; } } @media only screen and (max-width:540px),only screen and (max-device-width:540px) { body,html { font-size: 72px; } } @media only screen and (max-width:480px),only screen and (max-device-width:480px) { body,html { font-size: 64px; } } @media only screen and (max-width:414px),only screen and (max-device-width:414px) { body,html { font-size: 55.2px; } } @media only screen and (max-width:412px),only screen and (max-device-width:412px) { body,html { font-size: 54.8px; } } @media only screen and (max-width:400px),only screen and (max-device-width:400px) { body,html { font-size: 53.33px; } } @media only screen and (max-width:375px),only screen and (max-device-width:375px) { body,html { font-size: 50px; } } @media only screen and (max-width:360px),only screen and (max-device-width:360px) { body,html { font-size: 47.8px; } } @media only screen and (max-width:320px),only screen and (max-device-width:320px) { body,html { font-size: 42.4px; } }
各尺寸分辨率怎么查看? 请使用谷歌浏览器移动端模拟器
主流移动设备做到这一步基本完成,还有点不够完美的地方就是这样要写很多种屏幕的根元素的字体大小。而且只能写区间。
三、JS解决方案 解决思路css不能解决的问题还是要用js来辅助
css只能设置某个区间的样式,
js可以动态获取当前设备的屏幕宽度。根据当前屏幕宽度设置当前屏幕宽度下的根元素字体大小。
同上css解决方案步骤一
步骤二: JS动态改变根元素字体大小在页面中引入下面js代码
// JavaScript Document (function (doc, win) { var docEl = doc.documentElement, resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth > 750) { docEl.style.fontSize = "100px";// 修正一下大于750的字体大小为100px } else { docEl.style.fontSize = 100 * (clientWidth / 750) + "px"; } /* * 100 -> html,body { font-size:100px; } * 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面 * 根据具体情况改变这两个数值 */ }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener("DOMContentLoaded", recalc, false); })(document, window);
不需要考虑有多少种设备分辨率什么的。通过js自动获取当前设备的clientWidth
,然后根据设计好的比例 计算出 根元素的字体大小。完美收工!
calc(): 用于动态计算长度值
vw:相对于视口的宽度。视口被均分为100单位的vw
一步到位:根据设计稿制作标准web页我们以iPhone6两倍设计稿标注来制作一个按钮。
宽:402px
高:105px
距离底部:60px
水平居中
css设置如下:
html,body {font-size:calc( 100vw / 7.5 )} /* * 同理 根据你的设计稿,宽度为640px的:font-size:calc( 100vw / 6.4 ) * 规定 1rem = 100px*; 这样只是为了方便计算 * 我们就可以根据这个比例来设计制作出一套css样式表布局这个页面,例如: */ .btn{ position: absolute; bottom: 0.6rem; // 0.6 = 60/100 left:50%; margin-left: -2.01rem; width:4.02rem; // 4.02 = 402/100 height: 1.05rem; // 1.05 = 105/100 }
/* * 假设你原有的项目中已经设置了在iPhone 6 的时候 1rem 代表 20px * css设置如下即可 */ html,body {font-size:calc( 100vw / 18.75 )}; .btn{ position: absolute; bottom: 1.5rem // 1.5 = (60/20)/2 left:50%; margin-left: -5.025rem; width:10.05rem; // 10.05 = (402/20)/2 height: 2.625rem; // 2.625 = (105/20)/2 }
说明:此解决方案仅适用于移动端支持calc和vw的浏览器
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/84711.html
摘要:做移动端开发的一大痛点就是,在真机运行下无法查看日志和其他信息如网络请求显示本地存储等信息。是一个专为手机网页前端设计的调试面板,类似的迷你版,其主要功能包括捕获日志检查元素状态显示性能指标捕获请求显示本地存储和信息浏览器特性检测等等。 showImg(https://segmentfault.com/img/bVXvig?w=2396&h=1302); 做移动端Web开发的一大痛点就...
摘要:屏幕适配是一个很容易被忽略的问题,但对于精益求精的产品而言,是必不可少的。对于开发的求职者而言,也是一个必需要理解清楚的经典问题文啃先生壹移动端适配的是什么我们讨论的是网页适配多种尺寸屏幕,让网页效果看起来和设计师的设计稿一样。 屏幕适配是一个很容易被忽略的问题,但对于精益求精的产品而言,是必不可少的。对于Web开发的求职者而言,也是一个必需要理解清楚的经典问题 文 | 啃先生 Mar...
摘要:本文适合的读者现在在手淘,京东,今日头条,美柚等过亿用户的手机中的,都常见网页,他们有更新快,灵活,便于分享和传播的特性。这里有他们中的几个的例子手淘,美柚。 本文适合的读者???? 现在在手淘,京东,今日头条,美柚等过亿用户的手机app中的,都常见h5网页,他们有更新快,灵活,便于分享和传播的特性。这里有他们中的几个h5的例子:(手淘,美柚)。这些app中都嵌者数以百计,千计的...
阅读 2471·2021-10-08 10:04
阅读 2709·2021-09-06 15:02
阅读 728·2019-08-30 13:50
阅读 1516·2019-08-30 13:21
阅读 2567·2019-08-30 11:15
阅读 2087·2019-08-29 17:19
阅读 1550·2019-08-26 13:55
阅读 1246·2019-08-26 10:15