首页 > 代码库 > 移动端笔记总结

移动端笔记总结

分辨率就是屏幕上横、纵的总象素点数。
如果我们设计的时候用单位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

 

移动端笔记总结