资讯专栏INFORMATION COLUMN

移动端网页怎么做?

luoyibu / 3098人阅读

摘要:移动端网页最大的特点是什么自适应不同尺寸的屏幕高大上的叫法响应式知道了自适应网页怎么做岂不是能很好解决问题了那么自适应网页怎么做呢网上关于这方面的文章有很多,我简单的整理一下。

移动端网页最大的特点是什么?自适应不同尺寸的屏幕!高大上的叫法:响应式!
知道了自适应网页怎么做岂不是能很好解决问题了?那么自适应网页怎么做呢?网上关于这方面的文章有很多,我简单的整理一下。

一、 HTML设置 在head中加入meta标签

简单解释一下:
我规定“页面宽度 = 屏幕宽度,初始缩放比例为1,允许用户最大和最小伸缩比都是1,不允许用户手动缩放”
深入了解 viewport

二、CSS解决方案 解决思路

始终贯彻能用css解决的坚决不用js
那么你想到了什么?媒体查询!@media 可以针对不同的屏幕尺寸设置不同的样式!
有了 @media 根据 每一个尺寸的屏幕设计一套样式表出来?!那岂不是写到吐血
除了 @media,我们还需要rem来配合使用。
大家应该知道em 是相对于父级元素来设置字体大小的,而我们的rem是相对于根元素的
这一点很重要。所以我们只要在 @media 中设置不同屏幕尺寸的 根元素的字体大小即可。

步骤一:根据设计稿制作标准web页

我们以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可以动态获取当前设备的屏幕宽度。根据当前屏幕宽度设置当前屏幕宽度下的根元素字体大小。

步骤一:根据设计稿制作标准web页

同上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解决方案 --(更新于2017-12-20) 解决思路

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

相关文章

  • 小技巧|移动网页调试神器Eruda使用技巧

    摘要:做移动端开发的一大痛点就是,在真机运行下无法查看日志和其他信息如网络请求显示本地存储等信息。是一个专为手机网页前端设计的调试面板,类似的迷你版,其主要功能包括捕获日志检查元素状态显示性能指标捕获请求显示本地存储和信息浏览器特性检测等等。 showImg(https://segmentfault.com/img/bVXvig?w=2396&h=1302); 做移动端Web开发的一大痛点就...

    xzavier 评论0 收藏0
  • 移动h5页面适配

    摘要:一直对页面充满崇敬揣着忐忑的心开始了我的之旅。但实际情况却并非如此理由如上但在移动设备上,必须弄明白这点。其他品牌的移动设备也是这个道理。 一直对h5页面充满崇敬,揣着忐忑的心开始了我的h5之旅。才发现直接照抄网上的方案是很容易,但是想真的了解内部的原理,这就给我了一个下马威了.通过在网上各种找资料,才将各种概念以及原理了解清楚.故写下这篇文章用于积累知识,如有问题,欢迎指正! 在开始...

    张率功 评论0 收藏0
  • 移动适配】移动Web怎么屏幕适配(一)

    摘要:屏幕适配是一个很容易被忽略的问题,但对于精益求精的产品而言,是必不可少的。对于开发的求职者而言,也是一个必需要理解清楚的经典问题文啃先生壹移动端适配的是什么我们讨论的是网页适配多种尺寸屏幕,让网页效果看起来和设计师的设计稿一样。 屏幕适配是一个很容易被忽略的问题,但对于精益求精的产品而言,是必不可少的。对于Web开发的求职者而言,也是一个必需要理解清楚的经典问题 文 | 啃先生 Mar...

    huangjinnan 评论0 收藏0
  • multipages-generator今日发布?!妈妈再也不用担心移动h5网站搭建了!

    摘要:本文适合的读者现在在手淘,京东,今日头条,美柚等过亿用户的手机中的,都常见网页,他们有更新快,灵活,便于分享和传播的特性。这里有他们中的几个的例子手淘,美柚。 本文适合的读者?‍?‍?‍? 现在在手淘,京东,今日头条,美柚等过亿用户的手机app中的,都常见h5网页,他们有更新快,灵活,便于分享和传播的特性。这里有他们中的几个h5的例子:(手淘,美柚)。这些app中都嵌者数以百计,千计的...

    xavier 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<