200 Success
200 Success 博客
200 Success
常用标签
组员

一、写在前面

最开始的Java Web项目一般采用的是三层架构的模式,即表现层,业务逻辑层,持久层。每一层都依赖着上一层的对象来实现本层的功能。例如,在一个简单模拟的学生登录系统中:

  • 持久层
public class StudentDaoImpl implements IStudentDao {
    public boolean findStudent(){
        return true;
    }
}

情况:项目部署在Tomcat时,CSS样式无法生效,而在本地直接打开html文件没有问题
Image.png

警告:Resource interpreted as Stylesheet but transferred with MIME type text/html
大意是:css的mime类型被错转换成html文件 (实际上是Css但是被认为是html)



2.png

图1:控制台警告



3.png

图2:查看实际情况



原因:过滤器设置了/*,此时过滤的情况是全局,而这个过滤器中设置了content-type为text/html,导致过滤过界
4.png



解决方案:新增加一个CSS过滤器,在全局过滤器的基础上进一步的更精确过滤的范围,如图所示:
(在这里类似是白名单的情况)
5.png



另外一种解决方案:
亦可以将所有servlet的访问路径加一个特定的后缀,例如xxxServlet.do,让他们跟css一样有同样的特征,可以一下子就可以判断到他是Servlet,从而缩小过滤范围

这是一个简单的关于transition与overflow属性的小demo

在线示例
body {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

#test-box,
#test-box-1 {
    width: 20%;
    height: 20rem;
    background-color: skyblue;
    transition: height 0.5s;
    margin-left: 1rem;
    margin-bottom: 1rem;
    /* div块高度为0时,内部元素都因溢出而隐藏,但有滚动条,可隐藏。 */
    overflow: auto;
}

#test-box h1 {
    /* 给定宽度*/
    width: 100%;
    /* 换行处理:不换行 */
    white-space: nowrap;
    /* 溢出内容做隐藏处理 */
    overflow: hidden;
    /* 溢出的隐藏内容用省略号替代 */
    text-overflow: ellipsis;
}

#test-box::-webkit-scrollbar {
    display: none;
}

.box-close {
    height: 0 !important;
    /* display: none;  不可配合transiton使用 */
}

#btn-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 1rem;
}

#btn {
    border: 1px solid red;
    width: 1rem;
    height: 1.5rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
    margin-right: 1rem;
    transition: 0.5s;
}

.btn-change {
    transform: rotate(360deg);
}
<body>
    <div id="btn-box">
        <!-- 触发一个事件若要调用多个函数,可用逗号相隔 -->
        <div id="btn" onclick="div_change(),btn_change(this)"></div>
        <span class="btn-span">点我</span>
    </div>
    <div id="test-box">
        <h1>1This is a transition test!This is a transition test!</h1>
        <h1>2This is a transition test!</h1>
        <h1>3This is a transition test!</h1>
        <h1>4This is a transition test!</h1>
        <h1>5This is a transition test!</h1>
        <h1>6This is a transition test!</h1>
    </div>
    <div id="test-box-1">
        <h1>1This is a transition test!</h1>
    </div>
</body>
<script>
    function div_change() {
        let testBox = document.getElementById('test-box');
        if (!testBox.className) {
            testBox.className = 'box-close';
        } else {
            testBox.className = '';
        }
    }

    function btn_change(e) {
        if (!e.className) {
            e.className = 'btn-change';
        } else {
            e.className = '';
        }
    }
<script>
2020-02-02
By Hokori

在这篇文章中记录一下自己已知的HTML5移动端与PC端的差异

在移动端中

  • 伪类:hover的表现比较奇怪,点击之后效果不会消失

    移动端并没有鼠标,也没有:hover存在的必要,响应式页面可以通过media query区别PC和移动端来按需添加:hover效果

  • click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有click,就会进行放大缩小。

    为了解决这个问题,有不同的方案:

    但即便如此,在某些业务场景中还是不够方便的,因此诞生了许多手势库,如
    Hammer.js 支持drag,swipe,hold,doubleTap等手势

  • 在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但在移动端,CSS的1px等于几个物理像素是和屏幕像素密度有关的。
    比如从iPhone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。
    详细请见 -> 移动前端开发之viewport,devicePixelRatio的深入理解

    我们常在移动端开发的时候在HTML开头添加这个meta标签来解决这个问题
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    其中

    width=device-width :表示宽度是设备屏幕的宽度
    initial-scale=1.0:表示初始的缩放比例,1.0就是占网页的100%
    minimum-scale=1.0:表示最小的缩放比例
    maximum-scale=1.0:表示最大的缩放比例
    user-scalable=no:表示用户是否可以调整缩放比例

参考链接:
1.https://www.cnblogs.com/freefly-an/p/8665451.html
2.https://www.jianshu.com/p/413a25b2c503