移动端笔记总结

Posted 2020-09-23

分辨率就是屏幕上横、纵的总象素点数。
如果我们设计的时候用单位px，可以说是物理分辨率尺寸。
如果我们设计的时候用单位pt，可以说是逻辑分辨率尺寸。

===================================================

默认情况下：手机按照桌面浏览器的分辨率显示,如果要在手机上显示需要加<meta>标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

viewport：
width=device-width 宽度按照设备最合适的走
initial-scale=1.0 初始不缩放
user-scalable=no 禁止用户缩放操作
minimum-scale
maximum-scale

===================================================

禁止设备将疑似手机号/邮箱,进行识别。取消点击拨打电话等事件
<meta name="format-detection" content="telephone=no,email=no"/>

设置浏览器，时候最新的IE和chrome去编译（不是手机端专用，PC网页一般也需要设置）
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

 

其他几个meta标签，了解即可
1 设置浏览器过期时间，-1表示时刻过期，及每次刷新都要请求最新数据
2 是否设置浏览器缓存，否
3 是否从本机读取缓存文件，否

<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">

==========================================================

移动端布局：
1.viewport
调整移动端分辨率
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<script>
window.onload = window.onresize = function (){
document.documentElement.style.fontSize = document.documentElement.clientWidth/16+‘px‘;
};
</script>

2.弹性盒模型box-sizing
content-box
border-box 往里挤(怪异盒模型)

3.弹性布局flex
父级：display:flex;
子级：flex:1
子级：flex:2
子级：flex:1

4.媒体查询->响应式布局
@media (条件){
css代码
}

优先级

5.rem

------------------------------------------------------------------

display:flex; 【父级设置了flex属性，子级就会排在一排并自动分配空间，类似于浮动。】

父盒子设置了display:flex,行内元素是可以直接设置宽高

justify-content:设置子盒子的水平排列方式
center;【居中】
flex-start【居左】
flex-end【居右】
space-between【两端对齐】
space-around【两边有间隙的两端对齐】

align-items:设置子盒子的竖直排列方式
center；【垂直居中】
flex-start【居顶】
flex-end【居底】

 

flex-direction:row;

flex-wrap:wrap;

==========================================================

模拟bootstrap：
1.分12格
2.有4种分辨率
lg 1200
md 992
sm 768
xs 更小

==========================================================

省时的浏览器同步测试工具:

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。

注释：使用时需要打开wamp虚拟服务器，然后在cmd命令行中安装并启动browser-sync

browser-sync
1.安装
*global——全局安装
npm install -g browser-sync

2.切换目录
cd D:/BaiduYunDownload/ate

3.运行browser-sync
browser-sync start --server --files "*.html"

请注意这个命令里的start --server，这其实是BrowserSync自己启动了一个小型服务器。如果简单只是想要监听整个项目，可以写成这样：【browser-sync start --server --files "**"】

===============================================

bootstrap：默认会给.container加伪类

.container:after,.container:before{
content:‘‘;
display:none;
}

--------------------------------------------------
container 默认有padding值

visible-lg-inline-block