移动web开发入门-学习笔记-5

最新推荐文章于 2024-07-24 11:13:53 发布
最新推荐文章于 2024-07-24 11:13:53 发布
阅读量108 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Pakho_lin/article/details/119951255
版权

文章目录

移动端常见问题

一、浏览器兼容性

htm5l兼容 | css3兼容 | js兼容

<style>
        header, footer {
            width: 100%;
            height: 50px;
        }
        header {
            background-color: red;

            /*display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            justify-content: center;
            -ms-align-items: center;
            align-items: center;*/
            /*text-align: center;
            line-height: 50px;*/
        }
        footer {
            background-color: green;
        }

        .flexbox header {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            justify-content: center;
            -ms-align-items: center;
            align-items: center;
        }
        .no-flexbox header {
            text-align: center;
            line-height: 50px;
        }
    </style>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/modernizr.js"></script>
</head>
<body>
    <header>header</header>
    <footer>footer</footer>

    <script>
        // if (requestAnimationFrame) { // 错误
        //     // ...
        // }
        // if (window.requestAnimationFrame) { // 正确

        // } else {

        // }

        var requestAnimationFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function (fn) {
                setTimeout(fn, 16);
            };

            requestAnimationFrame(function () {
                console.log(1);
            });
    </script>
</body>

二、移动端动画

在这里插入图片描述

三、click 300ms 延迟

根本原因：double click 双击

移动端默认双击情况下会有方法效果，当你点击一次之后，移动端无法判断你是否下一次还会继续完成双击，因此存在300 ms 延迟

有一部分浏览器，比如chrome浏览器，当你在meta头设置width=device-width时，它会自动禁止300 ms的延迟

推荐的解决方法：fastclick https://github.com/ftlabs/fastclick

原理：当检测到touchend事件后，会触发自己模拟的click事件

四、单行和多行文字溢出省略

 <style>
        /*css reset*/
        * {
            padding: 0;
            margin: 0;
        }
        body {
            font-size: 12px;
            color: #5d655b;
        }
        a {
            font-size: 12px;
            color: #686868;
            text-decoration: none;
            -webkit-tap-highlight-color: transparent;
        }
        img {
            vertical-align: top;
            border: none;
            width: 100%;
        }

        /*recommend*/
        .recommend-item {
            width: 50%;
            background-color: #fff;
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
            margin: 20px auto;
        }
        .recommend-link {
            display: block;
            width: 100%;
            height: 100%;
        }
        .recommend-pic {
            width: 100%;
            margin-bottom: 8px;
        }
        .recommend-img {
            width: 100%;
            height: 100%;
        }
        .recommend-name,
        .recommend-origPrice,
        .recommend-info {
            padding: 0 10px;
            margin-bottom: 8px;
        }
        .recommend-origPrice {
            color: #ccc;
        }
        .recommend-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .recommend-price {
            color: #e61414;
        }
        .recommend-price-num {
            font-size: 20px;
        }
        .recommend-count {
            color: #999;
        }

        .recommend-name {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .text-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .multiline-ellipsis {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal !important;
            word-wrap: break-word;
        }
        .recommend-name {
            /*height: 30px;*/
            /*height: 100px;*/
        }
    </style>
</head>
<body>
    <div class="recommend-item">
        <a href="###" class="recommend-link">
            <p class="recommend-pic">
                <img src="img/1.jpg" alt="recommend" class="recommend-img">
            </p>
            <!-- <p class="recommend-name"><span class="text-ellipsis">欧派整体橱柜定制简约现代 欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代</span></p> -->
            <p class="recommend-name multiline-ellipsis">欧派整体橱柜定制简约现代 欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代欧派整体橱柜定制简约现代</p>
            <p class="recommend-origPrice">
                <del>¥2000.00</del>
            </p>
            <p class="recommend-info">
                <span class="recommend-price">¥<strong class="recommend-price-num">1000</strong></span>
                <span class="recommend-count">985件已售</span>
            </p>
        </a>
    </div>
</body>

五、水平居中和垂直居中

<title>2.5 水平居中和垂直居中</title>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }
        .modal-wrapper {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1000;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);

            /*display: flex;
            justify-content: center;
            align-items: center;*/
        }
        .modal {
            overflow: hidden;
            background-color: #fff;
            border-radius: 10px;
            font-size: 16px;

            /*1 容器宽高自适应 没有指定宽高 内容撑开*/
                /*1-1 内联元素 不能设置宽高 内容撑开*/
                    /*1-1-1 文字水平垂直居中 多行文字*/
                    /*display: inline;*/
                    /*padding: 30px 20px;*/
                    /*padding: 0 20px;*/

                    /*1-1-2 容器水平垂直居中 内联元素*/
                    /*position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);*/
                    

                /*1-2 内联块元素 不能设置宽高 内容撑开*/
                    /*1-2-1 文字水平垂直居中 多行文字*/
                    /*display: inline-block;
                    padding: 30px 20px;*/

                    /*1-2-2 容器水平垂直居中 内联块元素*/
                    /*position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);*/
                
                /*1-3 块元素 不能设置宽高*/
                    /*1-3-1 文字水平垂直居中 多行文字*/
                    /*display: block;
                    text-align: center;
                    padding: 30px 0;*/

                    /*1-3-2 容器水平垂直居中 块元素*/
                    /*position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);*/
                    
            
            /*2 指定容器宽高宽高*/
                /*2-1 内联元素 不能设置宽高 内容撑开*/

                /*2-2 内联块元素 设置宽高*/
                    /*2-2-1 文字水平垂直居中 多行文字*/
                    /*display: inline-block;
                    width: 300px;
                    height: 100px;
                    text-align: center;
                    line-height: 100px;*/

                    /*多行文字*/
                    /*display: flex;
                    justify-content: center;
                    align-items: center;*/

                    /*2-2-2 容器水平垂直居中 内联块元素*/
                    /*position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);*/
                    /*margin-left: -150px;
                    margin-top: -50px;*/
                    
                
                /*2-3 块元素 设置宽高*/
                    /*2-3-1 文字水平垂直居中 多行文字*/
                    display: block;
                    width: 300px;
                    height: 100px;
                    text-align: center;
                    line-height: 100px;
                    
                    /*2-3-2 容器水平垂直居中 块元素*/
                    /*margin: 0 auto;*/
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    /*transform: translate(-50%, -50%);*/
                    margin-left: -150px;
                    margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="modal-wrapper">
        <span class="modal">单行文字水平垂直居中</span>
        <!-- <span class="modal">多行文字水平垂直居中 多行文字水平垂直居中多行文字水平垂直居中</span> -->
    </div>
</body>
wuyi~lin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端html5+css3前端开发入门学习笔记
m0_62516225的博客
10-16 1999
Web前端html5+css3前端开发入门学习笔记
每天成长一点---WEB前端学习入门笔记
小浩
01-05 4677
每天成长一点WEB前端学习入门笔记 从今天开始，本人就要学习WEB前端了。 经过老师的建议，说到他每天都会记录下来新的知识点，每天都是在围绕着这些问题来度过，很有必要每天抽出半个小时来写一个知识总结，及时对一天工作的一个小结， 也是对自己知识的一个梳理，之前特别喜欢记在本子上，不过长期的不用，就会发现记在本子上很容易就忘，所以后面开始写博客。首先，它并不单单是对自己的一些技术心得 的总结亦
《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录
放下华子我只抽RuiKe5的博客
09-23 1158
本文是对《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》所有知识点的笔记进行总结分类。 学习时总结的目录笔记以及思维导图和实训，将在后续更新。
学习笔记（2):HTML 5移动开发从入门到精通-Web时代变迁
大学计机大学计机大学计机大学大学计机大学计机大学计机大学大学计机大学计机大学计机大学大学计机大学计机大学计机大学大学计机大学计机大学计机大学大学计机大学计机大学计机大学大学计机大学计机大学计机大学大学计机大学计机大学计机大学大学计机大学计机大学计机大学大学
07-20 122
本课程讲述了HTML 5移动开发的各种技术，通过本课程的学习，用户可以掌握HTML 5移动开发的技巧
Java学习笔记-day01-Java入门
c1023j的博客
06-27 772
安装->简单配置->编写案例。Java SE：用于桌面应用开发，是其他两个版本的基础。Java ME：用于嵌入式电子设备或者小型移动设备，例如微波炉、数码相机。Java EE：用于web方向的网站开发。2.3.3 Java的主要特性：面向对象、安全性、多线程、简单易用、开源、跨平台。高级语言的编译运行方式：编程、编译、运行。编译型：c/c++、解释型：python、混合型：Java。Java不是直接运行在系统中，而是运行在虚拟机中。2.3.4 JRE和JDK。
Kubesphere-学习笔记【入门篇】
qq_34226628的博客
05-17 5615
CentOS 7安装和配置ssh 1. 安装openssh-server yum install -y openssl openssh-server 2. 修改配置文件 用vim打开配置文件/etc/ssh/sshd_config 将上图的PermitRootLogin，RSAAuthentication，PubkeyAuthentication的设置打开。 启动ssh的服务： systemctl start sshd.service 设置开机自动启动ssh服务 sys...
《Java Web开发入门很简单》学习笔记
巴里大叔的博客
11-23 1627
《Java Web开发入门很简单》学习笔记 1123 第1章 了解Java Web开发领域Java Web主要涉及技术包括：HTML、JavaScript、CSS、JSP、Servlet、JDBC、JavaBean(Application)和数据库。进一步：Struts、Sping和Hibernate，MVCJava Web工作原理：1、浏览器和WEB服务器建立连接2、浏览器发送HTTP请求3、服...
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3634
Web前端学习笔记（1）
Web前端学习笔记
DAOkonglong的博客
10-16 3446
Web前端学习
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
web--bootstrap入门基础笔记
09-26
这个"web--bootstrap入门基础笔记"是专科计算机软件设计专业大二学生在一个月内通过32节90分钟课程学习的总结，适用于从零开始学习的初学者，同时也为有一定经验的开发者提供参考。 首先，Bootstrap的核心概念是...
bootstrap学习笔记-html5
12-22
这个“bootstrap学习笔记-html5”压缩包文件显然包含了有关如何使用Bootstrap和HTML5进行网页设计的资料，非常适合初学者入门。接下来，我们将深入探讨这两个重要主题。 HTML5（超文本标记语言第五版）是网页开发的...
Html5原生游戏开发学习笔记.zip
04-19
这篇学习笔记将深入探讨HTML5游戏开发的关键技术和实践方法。 首先，我们要理解HTML5的基础。HTML5是超文本标记语言的最新版本，它增强了网页的结构化和语义化能力，引入了新的元素如`<canvas>`、`<audio>`和`...
pycharm官网paper-m开发笔记
06-11
【标题】"pycharm官网paper-m开发笔记"指的是在PyCharm官网上关于"paper-m"项目的开发经验、技巧和笔记。PyCharm是一款由JetBrains公司开发的强大Python集成开发环境（IDE），它提供了丰富的功能，如代码编辑、调试...
JS基本功DOM学习笔记
07-12
在JS基本功DOM学习笔记中，我们将深入探讨以下几个核心知识点： 1. **DOM树**：DOM将网页内容表示为一棵由节点构成的树形结构，其中每个节点代表HTML元素、属性、文本等。根节点通常是`document`，其他节点如`<div>...
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 465
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
网站基本布局CSS
最新发布
m0_46608027的博客
07-24 514
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 984
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 74
【代码】TS如何处理js模块的类型？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值