您的位置:首页 > 移动开发

移动端布局一

2018-10-25 10:51 204 查看

首先先了解html中这一句话的含义:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no">

 width - viewport-的宽度 height - viewport的高度
            initial-scale - 初始的缩放比例
            minimum-scale - 允许用户缩放到的最小比例
            maximum-scale - 允许用户缩放到的最大比例
            user-scalable - 用户是否可以手动缩放

然后在了解一个单位rem

 

rem是CSS3新增的一个相对单位(root em,根em)。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。(当然移动端布局不需要考虑这些兼容的问题)

在了解一下手机屏幕分辨率以及逻辑分辨率(以iPhone为参照)

移动端物理像素和逻辑像素
设备 物理像素 逻辑像素 物理像素/逻辑像素
iPhoneX 1125*2436 375*812 3

iPhone6splus

1080 * 1920

1242 * 2208

414 * 736

3

iPhone6

750 * 1334

375 * 667

2
iPhone5 640*1136 320*568 2
iPhone4 640*960 320*480 2

iPhone 1G

320*480 320*480 1

iPhone 3G

320*480 320*480 1

iPhone 3GS

320*480 320*480 1

 

屏幕大小相同,分辨率越高,像素点越小

今天先总结移动端的两种布局方式就是写法以及实例明天将会总结第三种方法;

首先第一种:

就是在head部分加上

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no">

上代码都按照逻辑像素点1:1的去写代码

按设计图与手机尺寸比例去算出相同效果大小的px值;

第二种:

运用rem去解决自动适应屏幕的大小比例;

代码如下:

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 自动获取屏幕宽度设置html字体大小的js -->
<script>

(function(){ var
doc = document.documentElement,
resize = 'onorientationchange' in window ? 'orientationchange' : 'resize',
resizeEvent = function () {
// 获取设备宽度
var WIDTH = doc.clientWidth
// 设置宽度
doc.style.fontSize = 100 * WIDTH / 750 + "px"
}

window.addEventListener('DOMContentLoaded', resizeEvent)
window.addEventListener(resize, resizeEvent)})();
</script>
<style>
body{
margin: 0;
}
header {
height: .88rem;
background: red;
font-size: .32rem;
}
</style>
</head>
<body>
<!-- 以设计图为标准
750px宽度时,将html字体大小设置为100px
375px宽度时,将html字体大小设置为50px -->
<header>文字文字文字文字文字文字文字文字文字文字文字文字文字</header>
</body>
</html>

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: