移动前端自适应适配方法总结

移动端前端适配方案(总结) -- 面试重点

不要再问我移动适配的问题了

一、响应式布局:

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... } // Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

二、移动端适配

移动设计图: 640px,iopne6: 750px

PC屏: 1240px, 960px

概念:

屏幕尺寸: 屏幕对角线(英寸)

屏幕分辩率: 物理像素(像素点) 1024*1980 px

  • 1px: 1横向像素 * 1纵向像素
  • 就是卖手机标注的屏幕像素

屏幕像素密度(PPI): 一英寸内的拥有的像素

设备独立像素:

是一种可以被程序所控制的虚拟像素,在Web开发中对应CSS像素

  • 占满屏幕的虚拟的开发像素

像素比: 物理像素/设备独立像素

2.1 为什么适配:

像素:

位图像素: 图片的像素

  • 当位图像素 = 物理像素才能完美显示

视口:

**视觉视口: **(就是文档的实际在浏览器中的大小)

  • 就是html元素
  • 随用户的缩放改变,即网页开发配置的尺寸被改变
  • 网站设计稿,是小于等于视觉视口的

布局视口:(设备出厂定好了, 不能改变, 就是屏幕大小,不是屏幕分辩率)

  • 浏览器默认的不出现滚动条的屏幕大小,所以,在移动端, 网页设计尺寸, 不超过布局视口就不出现滚动条,(即配置的视觉视口大于布局视口)
  • 滚动条只于布局视口有关
  • 移动端要保证, 视觉视口 = 布局视口 , 才能完整网页
<meta name='viewport' width = 'device-width'/>
// 布局视口等于视觉视口
  • width = 'device-width' 这个相当于移动端的协议,必须签, 不签的话, 调式工具的 像素比, 就会出错 ; 签了才是DPR=2, 或者DPR=3;
  • pc端viewport无效

**理想视口: **

  • 签了协议的视口

获取视口的方法:

PC: 只有一个视口

document.docmentElenment.clientWidth (不包空滚动条)

window.inderWidth = 包括滚动条

screen.width = 分辨率

完美视口:

<meta name='viewport' width = 'device-width, inition-scale=1.0'/>

移动端:

document.docmentElenment.clientwidth = 布局视口

window.inderWidth = 视觉视口(不用,兼容不好)

screen.width = 布局视口/或理想视口(不用)

缩放:

用户缩放

PC: 会影响视觉视口,布局视口

移动端: 会影响视觉视口, 不影响布局视口

系统缩放

改变理想视口,做缩放

旋转:

完美视口,能解决旋转兼容问题

图片:(设计 位图像素 == 物理像素(分辨率))

锐化: 图片缩小

失真: 图片放大

**适配: ** 不同设备等比还原设计图

1、rem适配:

  • 改变了一个元素在不同设备上占据的css像素的个数
  • html的高宽==视觉视口,width,height,只读;用户缩放会影响

rem基于html的fontSize的大小; 所以所设计图与html的font-size进行等比

(function(){
var styleNode = document.createElement('style')
var htmlW = document.documenElement.clientWidth / 16 //将视觉视口分成16份 styleNode.innerHtml = `html{font-size:${htmlW} !important}` // 利用css才有!imporant属性, 将根字体固定,防止误改
document.head.appendChild(styleNode)
})()
  • 利用css才有!imporant属性, 将根字体固定,防止误改

**优点 : ** 没有破坏完美视口

**缺点: ** px到rem太复杂

2、viewport适配

  • 改变视觉视口的大小, html的宽度, 使之等于设计图
  • 不同设备css像素一样, 视觉视口缩放不一样
(function(targetWidth){
let targetWidth = 640;
var scale = documentElement.clientWidth/targetWidth
var meta = document.querySelector(meta[name='viewport'])
meta.content = `initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale}, user-scaleble=no`
})()

优点: 所量即所得

缺点: 没有实现完美视口

3、 百分比适配(页面简单可以)

4、vw方案

  • vw也是一个相对单位,它相对的是布局视口,1vw就是1%的布局视口宽度。

5、flexible, 是查询屏幕,生成font-size的大小, 所以在不需要适配的时候, 还是要@media 做限定

**一物理像素: **

1、 图片做border线

2、meta标签:

  • rem适配+scale缩放,border用px(taobao方案)
  • 这样会改变,适配, 不推荐

3、css3属性;

  • @media + transform: scale(1/dpr)缩放 (主流:)

4、box-shadow:

  • -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

web前端之移动端:知识汇的更多相关文章

  1. web前端篇:html基础知识

    目录 1.web前端: 2.HTML概述 2.1HTML介绍 2.2HTML在计算机中如何表现 3.HTML基础语法 4.练习题: 1.web前端: 什么是web? web 就是网页,是一种基于B/S ...

  2. Web前端上万字的知识总结

    下面是自己学HTML+DIV+CSS+JS时的学习笔记,给大家分享以下,相互学习.大二时候寒假在家无聊的时候想做点事,总结了一下web前端基础的东西,下面的每个字都是自己手敲的. 1.<html ...

  3. Web前端入门必学知识

    入门主要有三个部分   一.html+css部分:      1.前端的入门门槛极低,体现在HTML和CSS上运行环境就是浏览器,html+css这部分特别简单,网上搜资料,书籍视频非常多.css中盒 ...

  4. 初学者入门web前端:C#基础知识:函数

    入行前端对函数的掌握程度有可能直接影响以后工作的效率,使用函数可以高效的编写编码,节省时间,所以我整理了C#中最基础的函数知识点,虽然我在学习中 遇到很多问题,但是只要能够解决这些问题,都是好的. 一 ...

  5. 【web前端】移动端控制台插件,手机端页面查看相关页面控制台信息

    一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试.或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并 ...

  6. web前端之浏览器: 知识汇总

    一.URL到页面 准备阶段: 输入URL,Enter进入查找 浏览器在本地查找host文件,匹配对应的IP: 找到返回浏览器并缓存 没有,则进入路由查找: 找到返回浏览器并缓存 再没有,再进入公网DN ...

  7. web前端之html基础知识初级

    html 基础标签 单标签 1.注释标签: ctrl+/ 换行标签: 横线标签: 标题标签: 段落标签: 表示强调标签: 文字 属性:文字加颜色 color:改变文字颜色 size:改文字大小属性 例 ...

  8. 100本最棒的web前端图书推荐

    前端技术,要学习的内容太多了,当你不知道从哪里开始的时候,你就先从看书开始,边看书边码代码,这个是学习编程必须的过程,因为你看一百遍,还不如自己写一遍,写一遍,第一可以加印象,第二便于更好的理解. 熟 ...

  9. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

随机推荐

  1. HDU1814Peaceful Commission求2-sa最小字典序

    #include <iostream> #include <cstdio> #include <vector> #include <cstring> # ...

  2. 牛客小白月赛4 B 博弈论 思维 字符串

    链接:https://www.nowcoder.com/acm/contest/134/B来源:牛客网 题目描述 铁子和顺溜在学习了博弈论的sg函数之后,解决了很多很多博弈题,现在他们遇到了一道难题. ...

  3. hdu 3065病毒侵袭持续中(ac自动机)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=3065 中文题题意不解释了. 依旧稍微改一下ac自动机模版就能过了.还有一个坑点!是多组数据!!! #i ...

  4. CodeForces Round 521 div3

    A:Frog Jumping 代码: #include<bits/stdc++.h> using namespace std; #define Fopen freopen("_i ...

  5. 10 UA池和代理池

    在Scrapy中,引擎和下载器之间有一个组件,叫下载中间件(Downloader Middlewares).因它是介于Scrapy的request/response处理的钩子,所以有2方面作用: (1 ...

  6. [淘宝客技术篇008](无需登录)淘宝天猫优惠券JSON接口1

    今天,小星给大家分享的是一个非常重要,非常有意义的接口:获取淘宝天猫优惠券的JSON接口. 先上个链接: http://uland.taobao.com/cp/coupon_list?pid=mm_2 ...

  7. a417: 螺旋矩陣

    题目: 每行有一正整数T,代表有几组测试数据 接下来有T行,每行有N.M两正整数 N为矩阵长宽,就是会有N*N矩阵 M为方向,M=1为顺时钟,M=2为逆时钟 N范围为1~100之间 思路: 所以,代码 ...

  8. HABSE表结构理解

    也分为行列,行是索引,锁定数据,查找数据只能通过行 列:建表时必须知道列族,真实列(列簇)在插入数据时候可以指定        查找指定列,必须带列族,列族1:name

  9. Kubernetes v1.16 发布 | 云原生生态周报 Vol. 20

    作者:心贵.进超.元毅.心水.衷源.洗兵 业界要闻 Kubernetes v1.16 发布 在这次发布中值得关注的一些特性和 Feature: CRD 正式进入 GA 阶段: Admission We ...

  10. mysql命令行乱码解决办法

     解决办法: 修改mysql的配置文件my.ini,打开my.ini找到default-charactor-set,改为utf8. 进入命令行: show variables like'%char%' ...