精华内容
下载资源
问答
  • 移动端页面,如iPhoneX iPhone11等手机,页面底部会有个操作条,影响页面操作。我们可以留有一个安全距离。但是移动端设置margin-bottom是默认无效的。此时需要进行额外的配置。首先,在index.html的meta标签设置 ...

    2b4132285a44b17bcc5023af11c4b210.png

    移动端页面,如iPhoneX iPhone11等手机,页面底部会有个操作条,影响页面操作。我们可以留有一个安全距离。但是移动端设置margin-bottom是默认无效的。此时需要进行额外的配置。

    首先,在index.html的meta标签设置 viewport-fit=cover,user-scalable=no :

    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,user-scalable=no">

    接着给body设置样式:

    body {
      padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
      padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
    }

    去看看吧~

    展开全文
  • 58同城移动端页面.zip

    2021-04-20 18:05:07
    58同城移动端页面
  • 原标题:HTML5入门教程之移动端页面布局实战一、 移动设备和电脑pc端的区别我们要学习移动端布局首先要了解“移动端”和“网页端”布局的不同之处在于哪里?也就是屏幕的尺寸!讲到屏幕尺寸我们就不得不提viewport,...

    原标题:HTML5入门教程之移动端页面布局实战

    一、 移动设备和电脑pc端的区别

    我们要学习移动端布局首先要了解“移动端”和“网页端”布局的不同之处在于哪里?也就是屏幕的尺寸!讲到屏幕尺寸我们就不得不提viewport,它是设备终端用来显示网页的那一块区域,而非浏览器的可视区域。它可以比浏览器可视区域大可以比可视区域小,但一般来说移动设备里的viewport都比可视区域要来的大。

    现在的浏览都会给提供一个viewport的一个默认的值,一般以980像素居多或者是其他值。根据对不同平台下的新版本的浏览器做了些测试,通过测试,苹果手机下的默认viewport为980像素还有安卓移动手机上的浏览器,目前主流的最新浏览器的viewport也是980像素了。

    二、 viewport的实际作用

    因为 viewport的默认值是980像素只适用于PC端而不适用于移动端手机屏幕。因此手机端浏览器会出现横向滚动条。同时要说的是即使是基于980像素的viewport,我们在移动端浏览我们的桌面页面的体验其实也并不好,所以,一般的,我们会控制viewport来专门给移动端的浏览器设计一个页面。

    三、 viewport的实战设置

    现在绝大多数的浏览器里基本都支持对viewport的一个设置。我们首先来看看viewport的一些属性,viewport一共有六个可调试设置的属性,它们分别为:

    width属性: 设置layout viewport的宽度,为一个正整数,或字符串"width-device" ( 一般都是设置:"width-device");

    initial-scale属性: 设置页面的初始缩放值,为一个数字,可以带小数;

    height属性: 设置layout viewport 的高度,这个属性对我们并不重要,很少使用(一般我们就不用);

    maximum-scale属性: 允许用户的最大缩放值,是一个数字,可以带小数;

    minimum-scale属性: 允许用户的最小缩放值,是一个数字,可以带小数;

    user-scalable属性: 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许。

    下面是我们viewport的书写案例:(一般不用修改)

    这样我们就可以做到对viewport进行控制了。

    四、 移动端的设备

    作为在移动端开发的程序员来讲,如果不了解设备的一些性能,在开发上面是非常耗时间的一件事,但同时也带来负面影响的是项目的进度。

    下面是一部分移动端设备的分辨率参数:

    可以看出移动端的尺寸都是各不相同的,如果要适配这些尺寸只能通过一定比例来书写。

    五、 使用vw布局

    移动端布局为了适应各个设备的大小,以前都是通过js配合rem做到各个设备的适应,但是使用rem需要对html的fontsize做计算,而这个计算的一个关键点是获取屏幕宽度,这里的100vw就等于屏幕宽度,这时候如果把这个计算公式放到css去做是不是会完美了,因为为了获取屏幕宽度不使用js,而用vw来解决这个问题,因为100vw = 屏幕宽度。

    就是相对于浏览器viewport尺寸的单位,具体包括下面4个:

    ►vw – 视区宽度百分值

    ►vh – 视区高度百分值

    ►vmin – vw或vh,取小的那个

    ►vmax – vw或vh,取大的那个

    vw的计算方式就是:元素宽度/设计图总宽度(VW)。

    来源:千锋HTML5返回搜狐,查看更多

    责任编辑:

    展开全文
  • vue单页面实现pc移动端页面不同 博文:https://blog.csdn.net/qq_40488121/article/details/106218473
  • 移动端页面开发

    2019-09-17 23:08:13
    了解移动端页面与PC端页面开发的区别,学习移动端页面的开发流程。 移动端与PC端页面布局区别 视口 视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下...

    了解移动端页面与PC端页面开发的区别,学习移动端页面的开发流程。

    移动端与PC端页面布局区别

    视口

    视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用 meta 标签,name=“viewport ” 来设置视口的大小,将视口的大小设置为和移动设备可视区一样的大小。

    设置方法如下( 快捷方式:meta:vp + tab ):

    <head>
    ......
    <meta name="viewport" content="width=device-width, user-scalable=no,
     initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    ......
    </head>
    

    pc端与移动端渲染网页过程:
    在这里插入图片描述

    视网膜屏幕(retina屏幕)清晰度解决方案

    视网膜屏幕指的是屏幕的物理像素密度更高的屏幕,物理像素可以理解为屏幕上的一个发光点,无数发光的点组成的屏幕,视网膜屏幕比一般屏幕的物理像素点更小,常见有2倍的视网膜屏幕和3倍的视网膜屏幕,2倍的视网膜屏幕,它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕,它的物理像素点大小是一般屏幕的1/9。

    图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样,但是由于视网膜屏幕的物理像素点比一般的屏幕小,图像在上面好像是被放大了,图像会变得模糊,为了解决这个问题,可以使用比原来大一倍的图像,然后用css样式强制把图像的尺寸设为原来图像尺寸的大小,就可以解决模糊的问题。

    清晰度解决过程示意图:
    在这里插入图片描述
    背景图强制改变大小,可以使用background新属性

    background新属性
    background-size:

    length:用长度值指定背景图像大小。不允许负值。
    percentage:用百分比指定背景图像大小。不允许负值。
    auto:背景图像的真实大小。
    cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
    contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

    适配布局类型

    PC及移动端页面适配方法

    设备屏幕有多种不同的分辨率,页面适配方案有如下几种:

    1、全适配:响应式布局+流体布局
    2、移动端适配:

    流体布局+少量响应式
    基于rem的布局

    流体布局

    流体布局,就是使用百分比来设置元素的宽度,元素的高度按实际高度写固定值,流体布局中,元素的边线无法用百分比,可以使用样式中的计算函数 calc() 来设置宽度,或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

    calc()
    可以通过计算的方式给元素加尺寸,比如: width:calc(25% - 4px);

    box-sizing
    1、content-box 默认的盒子尺寸计算方式
    2、border-box 置盒子的尺寸计算方式为从边框开始,盒子的尺寸,边框和内填充算在盒子尺寸内

    响应式布局

    响应式布局就是使用媒体查询的方式,通过查询浏览器宽度,不同的宽度应用不同的样式块,每个样式块对应的是该宽度下的布局方式,从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕(pc、平板、手机)。

    相应布局的伪代码如下:

    @media (max-width:960px){
        .left_con{width:58%;}
        .right_con{width:38%;}
    }
    @media (max-width:768px){
        .left_con{width:100%;}
        .right_con{width:100%;}
    }
    

    基于rem的布局

    首先了解em单位,em单位是参照元素自身的文字大小来设置尺寸,rem指的是参照根节点的文字大小,根节点指的是html标签,设置html标签的文字大小,其他的元素相关尺寸设置用rem,这样,所有元素都有了统一的参照标准,改变html文字的大小,就会改变所有元素用rem设置的尺寸大小。

    cssrem安装

    cssrem插件可以动态地将px尺寸换算成rem尺寸

    下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录:Sublime Text -> Preferences -> Browse Packages… 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。

    配置参数 参数配置文件:Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例,默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为:[".css", “.less”, “.sass”]。

    移动端页面布局

    1、结合流体布局和响应式布局制作天天生鲜移动端首页页面

    2、使用基于rem的布局方式制作天天生鲜移动端首页页面

    天天生鲜首页效果图如下:
    在这里插入图片描述

    展开全文
  • 移动端页面自适应

    2017-11-11 01:07:25
    移动端页面自适应

    移动端height自适应
    http://iamocean.github.io/2015/02/08/css-height-adaptive/
    计量单位百分比都是相对于父元素而言的

    动态生成一个正方形
    https://idiotwu.me/css-responsive-square/

    展开全文
  • 问题:移动端页面适配不同型号手机和不同浏览器调试 使用whistle原因 在前端页面开发过程中经常遇到真机页面与PC上的Chrome浏览器调试器不一致,例如iPhone上的Safari浏览器、微信自带浏览器等自带的底部导航栏无法...
  • 移动端页面部分加载,下滑加载功能实现
  • 这是我刚开始学移动端页面制作时做的,做的很粗糙,内含制作网页需要的图片素材,练习移动端的可以试试练习一下
  • 仿照小米商城做的移动端页面,静态页面,注册登录没做
  • 移动端页面

    2015-04-10 14:25:13
    对于前端开发者来说移动端存在更多的挑战,移动端页面开发过程中会碰到各种各样千奇百怪的问题(我们俗称BUG或坑),那么今天我为大家分享移动端页面开发过程中的一些坑和排坑技巧。 移动端页面在不同设备、不同...
  • 这是我学习移动端页面开发中的作品之一,做的不是很好,制作网页需要的图片素材都在压缩包里。
  • 主要为大家详细介绍了基于Swiper实现移动端页面图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 基于 vue 的移动端页面可视化搭建工具
  • 移动端页面重构2

    2018-01-30 17:45:04
    毫无疑问移动端页面重构就有着越来越强大的发展前景和巨大的市场,移动端页面重构包括手机网站重构和微信网站重构。 第一:了解移动端页面布局概念 1.了解html5的特点 简易性:‚可扩展性:ƒ平台无
  • 移动端页面开发流程

    2020-12-08 09:25:48
    移动端页面布局 一、移动端app分类 1、Native App原生app手机应用程序  使用原生的语言开发的手机应用,Android系统用的是java,ios系统用的是object-C 2、Hybrid App 混合型app手机应用程序  混合使用原生的...
  • 本文主要介绍了js阻止移动端页面滚动的两种方法。具有很好的参考价值,下面跟着小编一起来看下吧
  • 主要介绍了Vue实现移动端页面切换效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很傻×的事情。这时如果用户没开启手机里的横屏模式,还要逼...这篇文章主要介绍了关于移动端页面强制竖屏的方法,感兴趣的小伙伴们可以参考一下
  • 移动端页面高度设置

    千次阅读 2019-09-04 18:42:16
    最近开发移动端页面,需要给页面设置背景颜色,但是发现高度不够,但是设置高度height:100% 后,没有效果。 设置为height:100vh 后,可以使用 不过我这里出现了 页面滚动 。然后查询资料后,发现了一个CSS3的属性...
  • Vue基础实现bilibili移动端页面一、Vue基础实现bilibili移动端页面 一、Vue基础实现bilibili移动端页面 简述:对于已经学到vue的同学,bilibili的页面布置难度不大,仔细阅读仔细体悟;难点在于怎么做到使用vue‘不...
  • 推荐7款H5手机移动端页面UI框架.zip Amaze UI Touch Framework7 Frozen UI GMU MUI SUI WeUI
  • 移动端页面满屏H5自适应方案(采用rem作为单位,设计稿为750 * 1334 或者设计稿为640 * 1334)
  • 文章目录7. 移动端页面开发移动端页面开发 7. 移动端页面开发 移动端页面开发 了解移动端页面与PC端页面开发的区别,学习移动端页面的开发流程。
  • MUI移动端页面跳转方式

    千次阅读 2017-04-07 11:15:44
    MUI移动端页面跳转方式
  • 移动端页面滚动穿透问题解决方案
  • MUI移动端页面跳转

    万次阅读 多人点赞 2016-07-13 18:33:48
    今天整理MUI移动端页面跳转的几种方法和遇到的不同的坑 先上设置button、label和a标签的代码: onclick="jumpToDetailView()" id="jumpToDetail">查看企业详情 this is a test label this is a test 跳转...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,883
精华内容 7,553
关键字:

移动端页面