关于优化老asp网站移动端过程问题与解决（三）

网站移动端化常用的几个手段和注意

1.媒体查询

• 简单的媒体查询（适用于在同一个CSS文档下使用）

@media screen and (max-width:768px){
	.head{##}
}

• “screen”（用于电脑屏幕，平板电脑，智能手机等）可以换成“all”（用于所有设备）或是print（用于打印机和打印预览）。亲测有用。
• 注：max-width是说明屏幕最大为768px时使用下列的样式。
• 根据屏幕大小调用不同的CSS文件

<link rel="stylesheet" media="screen and (max-width:768px)" href="##.css">

• 亲测可用
• 注：1.写图片的时候一般配合“transfrom”使用；

2.编码和使用浏览器的注意

• 保存并重新运行程序后最好要在浏览器里强制刷新，特别是Chrome浏览器，我曾经很久都以为自己写的代码在适配方面有问题，结果是因为没有强制刷新导致只显示原来的代码样式。
• 在浏览器里写东西时最好打开多窗口关闭时提醒弹窗，不要像我，刚才写到第五点的时候一个手滑就点到关闭（火狐），草稿也没有保存下来，只有重新写了，难受。（不知道怎么回事，我重写之后再在草稿箱又发现了刚才写的内容。更难受了）
• 拼写单词的时候一定要拼写正确，有很多次因为拼写错误检查了很久，无法推进进度。并且检查出来之后一点成就都没有。
• 写href时注意“/”的使用，会导致子目录下的页面直接调用到父目录的同名文件。

3.JS格式和引入不同的html

• 有想过用JS根据不同的浏览器内核来展现不同的页面，比如淘宝就是这样。但因为工程量有些大，不符合我这次的编写要求，所以没有使用。但学习过一段时间，来记录一下，亲测可用。
• JS最原始的function样子（我一度不知道function的格式）

$function(){
	<!--立即执行函数：(function(){##}());
				 或：(function(){##})();
}

• 根据浏览器内核调用不同的html，亲测有用。

    <script >
            if ((navigator.userAgent.match(/(phone|pad|pod|ipad|ios|Android|iphone)/i))) {
                window.location.href="m1.html" 
            }
    </script>

4.字符超过一定宽度就显示为省略号

• 一般就写这一套就行，亲测有用。

max-width: 98%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; 
display: block;

5.弹性盒

• 在改变盒子内部排版的时候，我认为弹性盒是比较简单且较为强大的。亲测有用。

 display:flex;
 justify-content:space-between;
 align-items: center;
 flex-direction:column;
 flex-wrap:nowrap;

• display是声明盒子样式；direction是改变中心轴方向；justify-content是改变主轴的对齐方式；align-items是改变侧轴的对齐方式；flex-wrap是看是否换行。

参考链接：https://www.jianshu.com/p/5856c4ae91f2

文章是自己用于记录自己学习以来的问题和过程。如果有帮到大家，非常荣幸。不求打赏，点赞，只求在大佬们发现问题的时候，能够和我说一声，让我能有长足的进步。万分感谢！万分感谢！