当前位置:Gxlcms > html代码 > 移动端手机适配_html/css_WEB-ITnose

移动端手机适配_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:145人阅读

今天来分享一下移动端网页适配。

背景

科技在不断的发展,人们的生活也在发生着翻天覆地的变化,其中一个重要变化就是移动设备的变化。手机,平板貌似都成了日常生活的必备。手机最初是作为一个通讯设备出现在人类的生活中,时至今日,手机已经不再是一个简简单单的通讯设备那么简单的事情了,更多的是作为一个娱乐和为生活提供更多方便的工具,离开了手机恐怕生活真的会没办法继续下去!既然手机已经如此普及,互联网如此广泛的今天,互联网产品的手机市场就显得尤为重要,作为互联网从业者,也就不得不考虑如何实现更多手机的功能了。web开发是互联网产品相当大的一部分,如何去适配手机设备,对于一个web前端开发工程师来说已经不是上升空间了,而是刻不容缓的一件事情。今天,我就来讲讲网页移动端适配的话题。

移动端网页适配,顾名思义就是网页在移动设备上如何做到完美的展现,理解起来很容易,但是实际情况却不容乐观,手机目前主要有Android和iOS两个系统占领大部分市场,曾经的iOS手机分辨率比较统一,开发起来对于前端来说适配还算是很容易的事情,自从iPhone6出现之后,这个现状似乎被残忍的打破了,Android市场就更是混乱不堪,各种屏幕,各种分辨率让人眼花缭乱,更让开发人员处于水深火热之中。通常情况下设计师做移动端网页会设计多个尺寸的设计图,但是这无疑加大了设计师和前端开发工程师们的工作量,然而又并没有什么卵用。那么要如何解决这个尴尬的局面呢?

下面我来简单讲一下我是如何来做这件事的吧,给大家做一个参考,也许并不是最优的解决方案。有更好的方式也可以加我微信公众号一起交流交流,进步源于分享嘛。在正文之前,上一张美图轻松一下眼睛吧。

怎么样,美美的绿色有没有让你放松一点?不管你有没有,下面进入正题吧。

最终实现的效果

设计图多大尺寸,我们写样式就写多大尺寸,利用sass变量自动转换成rem相对单位,在各种设备中自适应合理的尺寸。

首先我们需要在网页根元素即html中设置font-size,后面的rem将基于这个font-size来计算元素合适的尺寸。把如下代码放到head标签中,页面渲染结束就会生效,这个代码会向html标签中设置一个字体大小(这里以设计图宽度640px为例)

function setHtmlSize(){

var windowWidth = document.documentElement.clientWidth;

if(windowWidth > 800){

document.getElementsByTagName("html")[0].style.fontSize = 16 + "px";

}else{

var size = parseInt((document.documentElement.clientWidth / 640) * 20, 10);

size % 2 != 0 && size--;

document.getElementsByTagName("html")[0].style.fontSize = size + "px";

}

}

function updateOrientation(){ //这里是设备旋转

var orientation = window.orientation;

switch (orientation) {

case 90:

case -90:

document.getElementsByTagName("html")[0].style.fontSize = 10 + "px";

break;

default:

break;

}

}

setHtmlSize();

window.addEventListener("resize", setHtmlSize);

window.addEventListener("orientationchange", updateOrientation, false);

然后我们需要用到sass,因为sass可以像js一样写函数和方法,设置参数和变量等等。

新建一个.scss的sass文件,在里面添加如下代码

//适配retina屏文字大小

//demo: @include font-dpr(12px)

//-----------------------------------

@mixin font-dpr($font-size){

font-size: ($font-size / 20px) * 1rem;

}

//px转rem

//demo: px2rem(12px)

//-----------------------------------

@function px2rem($px, $base-font-size: 20px) {

@if (unitless($px)) {

@return px2rem($px + 0px); // That may fail.

} @else if (unit($px) == rem) {

@return $px;

}

@return ($px / $base-font-size) * 1rem;

}

然后在对应的地方引用这些方法就好了,比如设计图的文字为24px,我们就写

*{

@include font-dpr(24px)

设计图的边距为30px,我们这样引用:

*{

margin: px2rem(12px)

你以为这样就完了?

没错,这样就完了!

然而网页不支持scss的样式,所以我们需要将scss转换成css才可以被网页识别。那么如何将scss转换成css文件呢?可以查看我这一篇文章:

http://mp.weixin.qq.com/s?__biz=MzAwMDU4NjE3NA==&mid=405213045&idx=1&sn=2cb42ce85d5f4b98c77e1c55cadd474f#rd

由于这里没办法插入链接,所以只能麻烦大家复制链接打开,不好意思了。

由于时间的关系,暂且讲这么多,如果有什么更好的见解或者有什么错误指出,请关注个人公众号:年轻大叔进行反馈,我将于你一起进步。

如果您觉得我每天坚持写一篇文章不容易,不介意用打赏砸我,哈哈哈

人气教程排行