移动端布局一
首先先了解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>
阅读更多
- 移动端的垂直布局
- 你用过媒体查询,或针对移动端的布局/CSS 吗?
- 整理移动端的布局,适配问题
- 精通移动端布局 - 概念篇 -
- 基于浮动的移动端两列可延时加载的瀑布流布局
- 简单的移动端rem布局方法
- 移动端布局
- 移动端rem布局的理解
- css基础02:移动端自适应布局方案
- 解决移动端键盘弹起 导致input布局出现问题的解决方法
- 总结个人使用过的移动端布局方法
- 移动端 css/html (box-flex)自适应、等比布局
- 移动端页面自适应解决方案 rem布局
- 移动端布局方案 网易
- 解决Web移动端Fixed布局的方案(防止页面露底、overflow-scrolling、iOS下的 Fixed + Input BUG现象、isScroll.js)
- Web移动端Fixed布局的解决方案
- 移动端布局解决方案+神器
- [03]项目实战-移动端流体布局
- 移动端开发-webview 不支持css3 flex布局
- html rem布局,在移动端超级好用,自适应效果非常好!