精华内容
下载资源
问答
  • 手机端H5页面-矩形布局

    千次阅读 2016-05-29 12:10:02
    简介手机端的H5界面由于屏幕尺寸小和多适配,一般采用矩形布局来展现页面元素 矩形布局中可一行展现多列,每个单元格中可实现上、下内容布局或左右内容布局 以下就上、下布局为例来分析效果图代码分析HTML元素采用...

    简介

    手机端的H5界面由于屏幕尺寸小和多适配,一般采用矩形布局来展现页面元素
    矩形布局中可一行展现多列,每个单元格中可实现上、下内容布局或左右内容布局
    以下就上、下布局为例来分析

    效果图

    这里写图片描述

    代码分析

    HTML元素采用ui和li来布局,每个li为一个单元格,单元格中采用p和a元素来定义单元格中的上、下布局,如:

     <p class="d-price-title">总金额(元)</p>
     <a class="d-price">88888.00</a>

    元素样式采用相对布局,每个单元格左浮动布局,关键样式

    1. 每行展现几列通过li的宽度来控制,如一行四列,li的宽度则为width:25%
    2. 元素之间的间隔线,通过设置li的左方border线和下方border线是实现,如:border-left: 1px solid #F2F2F2;和border-bottom: 1px solid #F2F2F2;

    具体代码:

    .price-list li {
        position: relative;
        float: left;
        width: 50%;
        height: 60px;
        overflow: hidden;
        text-align: center;
        line-height: 40px;
        border-radius: 0.25rem;
        border-left: 1px solid #F2F2F2;
        border-bottom: 1px solid #F2F2F2;
        background-color: #f67f12;
    }
    

    完整代码

    样式:

    .price-region {
        background-color: #FFF;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    .price-list {
        position: relative;
        overflow: hidden;
        padding: 8px 8px 8px 8px;
    }
    
    .price-list,.price-list li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .price-list li {
        position: relative;
        float: left;
        width: 50%;
        height: 60px;
        overflow: hidden;
        text-align: center;
        line-height: 40px;
        border-radius: 0.25rem;
        border-left: 1px solid #F2F2F2;
        border-bottom: 1px solid #F2F2F2;
        background-color: #f67f12;
    }
    
    .d-price {
        font-size: 1.125rem;
        color: #fff;
    }
    
    .d-price-title {
        padding: 0px 0px 0px;
        height: 20px;
        width: 100%;
        color: #F2F2F5;
        /* line-height: 20px; */
        vertical-align: middle;
    }
    
    /* 价格区域2 */
    .price2-list {
        position: relative;
        overflow: hidden;
        padding: 0px 8px 8px 8px;
    }
    
    .price2-list,.price2-list li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .price2-list li {
        position: relative;
        float: left;
        width: 50%;
        height: 50px;
        overflow: hidden;
        text-align: center;
        line-height: 40px;
        border-left: 1px solid #E4E4E4;
        border-bottom: 1px solid #E4E4E4;
        background-color: #fff;
    }
    
    .d-price2 {
        font-size: 1.25rem;
        color: #FF6600;
    }
    
    .d-price2-title {
        padding: 0px;
        height: 10px;
        width: 100%;
        color: #949494;
        line-height: 20px;
        vertical-align: middle;
    }

    布局:

        <div class="price-region">
            <ul class="price-list">
                <li id="l1" onclick=""><div>
                        <p class="d-price-title">总金额(元)</p>
                        <a class="d-price">88888.00</a>
                    </div></li>
                <li id="l2" onclick=""><div>
                        <p class="d-price-title">昨日收入(元)</p>
                        <a class="d-price">34.852</a>
                    </div></li>
            </ul>
    
            <ul class="price2-list">
                <li id="l1" onclick="" style="border-left: 0px;"><div>
                        <p class="d-price2-title">累计收入(元)</p>
                        <a class="d-price2">12834.5</a>
                    </div></li>
                <li id="l2" onclick=""><div>
                        <p class="d-price2-title">当月收入(元)</p>
                        <a class="d-price2">3058.50</a>
                    </div></li>
            </ul>
        </div>
    展开全文
  • h5页面适配 iPhoneX

    2019-10-08 19:47:18
    h5页面如何适配 iPhoneX 的刘海屏与底部操作栏也变成了移动端开发所需要了解的常用知识,下面分享一篇 网页适配 iPhoneX 的经典好文 网页适配 iPhoneX,就是这么简单 使用 viewport-fit 和 env()、constant() 两种...

    h5页面如何适配 iPhoneX 的刘海屏与底部操作栏也变成了移动端开发所需要了解的常用知识,下面分享两篇 网页适配 iPhoneX 的经典好文

    网页适配 iPhoneX,就是这么简单
    兼容iphone x * 刘海的正确姿势

    使用 viewport-fitenv()、constant() 两种方法均能有效解决方案,可以根据项目的实际情况进行选择

    为方便理解,另外贴上 mdn 上对 viewport-fit 的解释(反正对我而言都挺绕的)

    viewport-fit 属性值
    • auto
      此值不影响初始布局视图端口,并且整个web页面都是可查看的。(注. 默认效果与 contain 一致)
    • contain
      视图端口按比例缩放,以适合显示内嵌的最大矩形。
    • cover
      视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量,以确保重要内容不会出现在显示之外。
    展开全文
  • 这个其实打开开发者模式,注意最左边有一个两个矩形大小不同叠加的符号,他的大名叫做toggle device toolbar 点击之后的效果,注意最上面是可以调整适配机型(跟小程序的工具一样) 二 点击查看样式div 这个应该都...

    可能是我少见多怪,看到前端同学用chromel来查看给APP端适配的H5效果,感觉竟然可以这样。之前只是通过开发者模式来看一下请求入参和返回,突然感觉get一个新技能。

    一首先如何在浏览器APP上H5的效果
    这个其实打开开发者模式,注意最左边有一个两个矩形大小不同叠加的符号,他的大名叫做toggle device toolbar
    在这里插入图片描述
    点击之后的效果,注意最上面是可以调整适配机型(跟小程序的工具一样)
    在这里插入图片描述
    二 点击查看样式div
    这个应该都知道,后端基本也应该知道,毕竟很多管理系统页面不是前后端分离,或者没有专业的前端基本要后端自己来。

    也是下面那一栏里面的,element和小箭头。element这个栏里面基本都是关于样式页面组成这些,小箭头就是点一下以后,指哪看哪,查看你想要看的地方的央视和构成。
    在这里插入图片描述
    三查看加载的资源数据以及缓存(包括storage,cookie,session等)
    之前用过小程序的开发工具,没用过chrome来看过这些数据,其实我感觉和小程序的差不太多。也是application面板
    入下
    在这里插入图片描述
    这里由于我最近做的需求涉及到登陆状态,这里真的是为我打开了一个新的世界。

    展开全文
  • H5页面适配 iPhoneX

    2021-03-21 00:03:19
    过去,我们拿到的手机是方方正正的矩形,所以整个屏幕都可以看做是安全区域 Safe Area,而如今由于 iPhone X 及以上机型,屏幕上的“刘海”以及屏幕四周采用圆角的设计,对于开发者...

    过去,我们拿到的手机是方方正正的矩形,所以整个屏幕都可以看做是安全区域 Safe Area,而如今由于 iPhone X 及以上机型,屏幕上的“刘海”以及屏幕四周采用圆角的设计,对于开发者和设计师来说,这个刘海带给他们的是更多的麻烦。比如黄颜色的部分表示网页遮挡了,用户不可见的地方。

    iPhoneX 及以上机型取消了物理按键,改成底部小黑条,对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。

    适配之前需要了解的几个新知识

    安全区域

    安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角、齐刘海、小黑条影响,如下图蓝色区域:

    也就是说,我们要做好适配,必须保证页面可视、可操作区域是在安全区域内。

    viewport-fit

    iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

    contain: 可视窗口完全包含网页内容(左图) 

    cover:网页内容完全覆盖可视窗口(右图) 

    auto:默认值,跟 contain 表现一致

    env 函数 iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

    safe-area-inset-left:安全区域距离左边边界距离 

    safe-area-inset-right:安全区域距离右边边界距离 

    safe-area-inset-top:安全区域距离顶部边界距离 

    safe-area-inset-bottom:安全区域距离底部边界距离

    这里我们只需要关注 safe-area-inset-bottom 这个变量,因为它对应的就是小黑条的高度(横竖屏时值不一样)。

    我们设置 viewport-fit:contain,也就是默认的时候时;设置 safe-area-inset-left, safe-area-inset-right, safe-area-inset-top 和 safe-area-inset-bottom 等参数时不起作用的。

    如何适配

    了解了以上所说的几个知识点,接下来我们适配的思路就很清晰了。

    第一步:设置网页在可视窗口的布局方式

    新增 viweport-fit 属性,使得页面内容完全覆盖整个窗口:

    <meta name=“viewport” content=“width=device-width, viewport-fit=cover”>
    

    前面也有提到过,只有设置了 viewport-fit=cover,才能使用 constant 函数。

    第二步:页面主体内容限定在安全区域内

    这一步根据实际页面场景选择,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况。

    body {
      padding-bottom:  env(safe-area-inset-bottom);
    }
    

    第三步:fixed 元素的适配

    如果 fixed 完全吸底元素(bottom = 0),可以通过加内边距 padding 扩展高度:

    {
       padding-bottom:  env(safe-area-inset-bottom);
    }
    
    展开全文
  • H5页面 iPhoneX适配

    千次阅读 2018-06-21 16:52:15
    viewport-fit:cover,页面内容充满屏幕  viewport-fit meta标签设置(cover时)   < meta name ="viewport" content ="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-...
  • H5页面必会遇到的问题及解决办法

    千次阅读 2020-03-17 10:06:44
    在我们开发H5页面的时候必会遇到一些兼容性等爬过坑的问题,在这里我将这些问题汇总一下,自己也做一下笔记 问题: 1,ios滑动不流畅 2,ios上拉边界下拉出现白色空白 3,页面件放大或缩小不确定性行为 4,click点击...
  • 自动化生成 H5 骨架页面

    千次阅读 2019-06-15 18:40:14
    自动化生成 H5 骨架页面 骨架页面(Skeleton Page)指的是当你打开一个移动端 web 页面,在页面解析和数据加载之前,首先给用户展示页面的大概样式。在骨架页面中,图片、文字、图标都将通过灰色矩形块或圆形块来...
  • 因为canvas是一个替换元素他就可以支持宽高(什么是可替换元素) 通过JavaScript来绘制canvas 在H5中canvas标签向JS提供了许多API接口,来让我们通过JS来绘制canvas标签中的一些画面等。。。 基础知识 var canvas =...
  • H5前端页面性能测试

    2017-03-15 16:32:00
    浏览器是Html解析和页面最终展示的工具,所以测试H5前理解浏览器的工作原理是必不可少的。 浏览器的主要功能 浏览器的主要功能是将用户选择的web资源呈现出来,它需要从服务器请求资源,并将其显示在浏览器窗口中...
  • H5

    千次阅读 多人点赞 2017-08-23 22:32:54
    H5基础
  • 简单写一个慕课网的h5布局页面 以下部分为HTML结构代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>IMOOC</title> <link rel="stylesheet" ...
  • h5

    2018-12-13 16:57:43
    窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口。 如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。 ...
  • h5 Canvas时钟制作

    2019-02-25 12:47:44
    在绘制之前,我们需要知道需要绘制的元素都...下面确定使用的html页面: 1.h5Clock.html &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;
  • 针对H5页面以及性能测试,常常测试小伙伴不知道从何下手,那么针对H5测试的前提我们必须了解H5的一些属性以及页面结构,整个扭转流程,只有了解如下,我们在更好的针对H5做一些测试。一、浏览器的主要功能 浏览器的...
  • H5笔记

    2021-03-11 10:22:00
    H5新标签 HTML5 提供了定义页面不同部分的新语义元素: article元素规定独立的自包含内容。文章可以用article标签包裹。 aside:元素页面主内容之外的某些内容(比如侧栏)。 header:规定页面的头部 main:规定...
  • 简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ... HTML5画布Canvas 一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,079
精华内容 1,231
关键字:

h5页面矩形