移动端_移动端开发 - CSDN
精华内容
参与话题
  • 移动端开发基础知识

    千次阅读 2019-04-09 23:37:04
    移动端与pc端web开发的区别: 1、浏览器不同 移动端的浏览器与pc端不同 谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器 百度手机浏览器 360安全浏览器 搜狗浏览器 猎豹浏览器等 国内的手机浏览器都是根据webkit内核修.....
    • 移动web开发指的是: 需要适配移动设备的网页开发
    • 移动web开发与pc端web开发没有本质的区别,使用的还是HTML/CSS/JavaScript的技术

    移动端与pc端web开发的区别:

    1、浏览器不同

    移动端的浏览器与pc端不同
    
    谷歌浏览器 苹果浏览器、 UC浏览器 QQ浏览器  百度手机浏览器  360安全浏览器  搜狗浏览器  猎豹浏览器等
    国内的手机浏览器都是根据webkit内核修改过来的,国内没有自主研发的内核,国内的操作系统也是基于Android系统修改的。
        
    因此在移动端,css3属性只需要加webkit前缀即可。
    

    2、屏幕尺寸

    移动端设备尺寸不一样(尺寸非常多,碎片化很严重)
    
    Android: 320*480 480*800  540*960 720*1280 1080*1920 2k屏 4k屏
    iphpne:  640*960 640*1136 750*1334 1242*2208
    
    
    让页面在不同手机屏幕中进行适配,宽度自适应, 基于手机全屏进行布局;
    
    PC: 要适配所有pc端页面用版心, pc端基于版心进行布局的
    

    3、布局方式

    移动端的特点
    
    - 手机端的兼容性问题比PC端小很多,因为手机端的浏览器版本比较新(对H5的支持比较好)
    - 手机端屏幕比较小,能够放的内容比较少。
    
    问题:布局的时候怎么解决屏幕大小不一致的问题?
    
    - PC端,固定版心,让所有分辨率的电脑的版心都是一样的,比如京东
    - 移动端:移动端无法设置版心,因为移动端的设备屏幕本身就小,设置版心不合适。因此移动端大多会采用流式布局(百分比布局)
    
    流式布局,也叫百分比布局,是移动端开发中经常使用的布局方式之一。
    
    流式布局的特征:
    
    - 宽度自适应,高度固定,并不是百分百还原设计图
    
    流式布局无法做到所有设备都非常逼真的还原设计图,有些设备显示效果不是特别的好看。但是流式布局是移动端非常常用的一种布局方式,比较简单,需要掌握(携程、京东)
    

    4、视口viewport(重要)

    问题:一个电脑上的网站,在手机端访问,效果是什么样的?
        
    1. 在手机端,html的大小都是980px,为什么?
        这主要是历史原因导致的,因为在移动设备刚流行的时候,网站大多都是pc端的,pc端的页面宽度一般都比较大,
        移动设备的宽度比较小,如果pc端页面直接在移动端显示的话,页面就会错乱。
        为了解决这个问题,移动端html的大小直接就定死成了980px(因为早起的pc端网站版心就是980px居多)。
        
    2. 视口
        在pc端,html的大小默认是继承了浏览器的宽度,即浏览器多宽,html的大小就是多宽,
        但是在移动端,多出来了一个视口的概念(乔布斯),视口是移动端一个虚拟的布局区域,
        视口的宽度默认定死了980px,因此html的宽度默认就是980px,视口的特点是能够根据设备的宽度进行缩放。
        
        
    3. 视口设置
        对于现在的移动端页面来说,视口默认为980px肯定不合适,因为设备宽度不够的话,视口会进行缩放,导致页面展示效果不好看。
    
    	视口参数设置
    
        //width 设置视口的宽度
        //width=device-width   设置视口宽度为设备的宽度(常用)。
        
        //initial-scale 设置初始缩放比例
        //initial-scale=1.0  表示不缩放
        
        //user-scalable 设置是否允许用户缩放
        //user-scalable=no  不允许用户缩放
        
        //maximum-scale  设置允许的最大缩放比例
        //maximum-scale=1.0  可以不设置,因为都禁止用户缩放了。
        
        //minimum-scale 设置允许最小缩放比
        //minimum-scale=1.0  不设置,因为都禁用用户缩放了。
        
        //标准写法:
        //快捷键:  meta:vp + tab键
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    
    
    屏幕与分辨率(了解)
    
    移动设备与PC设备最大的差异在于屏幕,这主要体现在屏幕尺寸和屏幕分辨率两个方面。
    
    屏幕尺寸
    
    通常我们所指的屏幕尺寸,实际上指的是屏幕对角线的长度(一般用英寸来度量)如下图所示:
    
    1英寸 = 2.54厘米
    

    在这里插入图片描述

    屏幕分辨率
    
    分辨率则一般用像素来度量,表示屏幕水平和垂直方向的像素数,例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成,如下图所示,相同尺寸下分辨率越高,越清晰。
    

    在这里插入图片描述

    像素:指计算机显示设备中的最小单位,即一个像素点的大小。
    
    像素是相对长度单位,在屏幕分辨率越高的设备,像素点越小,屏幕分辨率越低,像素点越大。
    

    在这里插入图片描述

    物理像素 和 css像素
    
    物理像素
    
    设备像素,在同一个设备上,它的物理像素是固定的,这是厂商在出厂时就设置好了的,即一个设备的分辨率是固定的。
    
    
    css像素
    
    逻辑像素,viewport中的一个小方格,CSS样式代码中使用的是逻辑像素。如果在一个设备中,物理像素与逻辑像素相等,将不会产生任何问题。但是,在iphone 4中,物理像素是640px960px,而逻辑像素数为320px*480px。因此,需要使用大约4个物理像素来显示一个CSS像素。
    
    
    像素比
    
    物理像素与逻辑像素之间的比例。当像素比为1:1时,使用1个物理像素显示1个逻辑像素;当像素比为2:1时,使用4个物理像素显示1个逻辑像素。
    
    
    获取设备的像素比
    
    window.devicePixelRatio  //物理像素与CSS像素的比值
    

    2倍图与3倍图(重要)(一般操作background-size属性,等比例缩小)

    在工作的过程中,从UI那拿到的设计图通常都是640的设计图或者是750的设计图.
    
    把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。
    

    在这里插入图片描述

    设备像素比devicePixelRatio:即像素的压缩比例
    
    结论 :在移动端为了在高清屏手机上显示得更加细腻,通常会使用更大的图片,比如2倍图或者3倍图。
    

    【演示:2倍图】

    移动端调试问题

    1. 模拟器调试
    2. 真机调试:使用手机进行访问。
    
    手机设备五花八门,屏幕尺寸都大不一样,尤其是安卓端,给我们的页面预览带来了一些麻烦。在实际工作中,作为开发者不可能有足够的设备让我们去测试(除了测试部门 ),即便有,效率也特别的低,因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。
    

    Less简介

    CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用。成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS/sass 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。
    
    (less css预处理器)
    
    本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。
    
    less仅仅是写css的另一种方式,写出来的less文件浏览器也不识别,所以啊,我们写完了less文件,还需要通过less解析器解析成css,最终浏览器引入的还是css文件。
    
    学习网站:  中文网: http://lesscss.cn/
    

    less的编译 (如何把less文件变成css文件)

    1.引入less.js文件(了解)

    必须指定rel的类型是stylesheet/less 
    <link rel="stylesheet/less" href="less/01.less">
    <script src="less.js"></script>
    
    注意:这种方式必须在http协议下运行,因为本质上less.js是通过ajax请求了less文件,进行编译。
    
    缺点:
    
    1. 需要多引入一个less.js文件
    2. 需要多一次http请求,file协议打开无效
    3. 无法实时的看到编译的结果。
    

    2.使用考拉

    koala是一个前端预处理器语言(less/sass)图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。
    

    考拉官网: http://koala-app.com/index-zh.html

    使用步骤:
    
    1. 把less文件夹拖进去
    2. 会在当前目录生成一个css目录
    

    3.VScode 安装 Easy LESS 插件

    Less语法
    
    less初体验
    
    新建一个less文件,输入以下代码:
    
    @color:red;
    p {
      color:@color;
    }
    

    可以看到,webstorm自动的帮我们生成了对应的css文件。

    注释

    /*这个注释是CSS中的注释,因此会编译到css中*/
    //这个注释,CSS中用不了,因此不会编译出来。
    

    变量

    @charset "UTF-8";
    @wjs_color:#e92322;
    body {
      background-color: @wjs_color;
    }
    
    div {
      width: 400px;
      height: 400px;
      border: 1px solid @wjs_color;
    }
    

    mixin混入

    混入样式类

    @charset "UTF-8";
    //混入
    .btn {
      width: 200px;
      height: 50px;
      background-color: #fff;
    }
    
    .btn_border {
      border: 1px solid #ccc;
    }
    
    .btn_danger {
      background-color: red;
    }
    
    .btn_block {
      display: block;
      width: 100%;
    }
    
    //混入其他类的样式。
    .my_btn {
      .btn();
      .btn_block();
      .btn_border();
      .btn_danger();
    }
    

    编译后的css

    @charset "UTF-8";
    .btn {
      width: 200px;
      height: 50px;
      background-color: #fff;
    }
    .btn_border {
      border: 1px solid #ccc;
    }
    .btn_danger {
      background-color: red;
    }
    .btn_block {
      display: block;
      width: 100%;
    }
    .my_btn {
      width: 200px;
      height: 50px;
      background-color: #fff;
      display: block;
      width: 100%;
      border: 1px solid #ccc;
      background-color: red;
    }
    
    缺点:写了很多类,但是都编译到css文件中了,其实我们需要的仅仅是.my_btn这一个类。
    

    混入函数

    不带参数的函数

    @charset "UTF-8";
    
    //不会被编译
    .btn() {
      width: 200px;
      height: 200px;
      background-color: #ccc;
    }
    .my_btn {
      .btn();
    }
    

    带参数的函数

    .btn_border(@width) {
      border: @width solid #000;
    }
    .my_btn {
      //如果函数定义了参数,调用的时候必须传入参数,否则会报错
      .btn_border();
      //传入参数,就不会报错
      .btn_border(10px);
    }
    

    带默认值的函数

    .btn_border(@width:1px) {
      border: @width solid #000;
    }
    .my_btn {
      //因为有默认值,所以不会报错
      .btn_border();
      //传入参数,会覆盖1px,也不会报错
      .btn_border(10px);
    }
    

    嵌套

    我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

    -使用伪类的时候 可以使用& 表示自己

    @charset "UTF-8";
    .wjs_header {
        border-bottom: 1px solid #ccc;
     }
    .wjs_header .header_item {
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-left: 1px solid #ccc;
     }
    .wjs_header .header_item:first-child {
        border-left: none;
     }
    

    导入

    @charset "UTF-8";
    
    @import "01-variable";
    
    @import "02-maxin";
    
    @import "03-mixin02";
    
    @import "04-book";
    

    模块化的思想,分模块进行管理这些less文件,最终只需要使用import将less引入到一起即可。
    

    函数

    在我们的 CSS 中充斥着大量的数值型的 value,less可以直接支持运算,也提供了一系列的函数提供给我们使用。

    http://www.1024i.com/demo/less/reference.html

    展开全文
  • 移动端web开发笔记(一)

    万次阅读 多人点赞 2018-07-15 20:33:43
    我本来一直在开发PC端的网页的,但是看到很多招聘都要求要有移动端开发的经验,所以开始学习一下!先搞清楚两个概念,移动端web开发,web app开发1、 移动web开发(pc端的页面用手机浏览器打开)这部分跟web前端开发...

    我本来一直在开发PC端的网页的,但是看到很多招聘都要求要有移动端开发的经验,所以开始学习一下!

    先搞清楚两个概念,移动端web开发,web app开发

    1、 移动web开发(pc端的页面用手机浏览器打开)

    这部分跟web前端开发差别不大,使用的技术都是html+css+js。区别为手机浏览器是webkit的天下,pc端是IE的天 下。手机网页可以理解成pc网页的缩小版加一些触摸特性。因为是在浏览器中进行的网页开发,所有最终代码具有跨系统平台的特性

    2、 web app开发(web应用程序)

    特指的是用html5技术开发,之所以叫web app是因为他比较接近客户端应用程序的用户体验,可以和系统深度融合,调用一些只有客户端才能调用的功能(比如在移动设备上利用html5开发出的网页可以访问电话、摄像头等本地功能).

     

    一、meta标签

    html代码中最关键的就是meta标签设置,开发移动端页面首先一定要设置viewport (可视区域)

    device-width - 设备的宽度

    initial-scale - 初始的缩放比例 

    minimum-scale - 允许用户缩放到的最小比例  

    maximum-scale - 允许用户缩放到的最大比例 

    user-scalable - 用户是否可以手动缩放


    其次是一些辅助优化功能,常用的有如下meta标签:

     

    下面延伸一下<meta>标签的作用

    meta标签是元素可提供相关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部,不包含任何内容。

    meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能

    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

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

     

    也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,例如加入关键字会自动被大型搜索网站自动搜集;可以设定页面格式及刷新等等。

     

    name属性

    主要有以下几种参数:

    (1)Keywords(关键字)

    说明:keywords用来告诉搜索引擎你网页的关键字是什么。提高网站的访问量

    举例:

    <meta name ="keywords"content="science,education,culture,politics,ecnomics,relationships,entertainment,human">

    (2)description(网站内容描述)

    说明:description用来告诉搜索引擎你的网站主要内容。

    网站内容描述(description)的设计要点:

    ①网页描述为自然语言而不是罗列关键词(与keywords设计正好相反);

    ②通常为网页内容的摘要信息,也就是希望搜索引擎在检索结果中展示的摘要信息;

    ③网页描述中含有有效关键词;

    ④网页描述内容与网页标题内容,主题内容有高度相关性;

    ⑤网页描述的文字不必太多,一般不超过搜索引擎检索结果摘要信息的最多字数(通常在100中文字之内,不同搜索引擎略有差异)。

    举例:<meta name="description" content="This page isabout the meaning of science,education,culture.">

    3robots(机器人向导)

    说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

    content的参数有all,none,index,noindex,follow,nofollow。默认是all

    举例:<meta name="robots"content="none">

    4author(作者)

    说明:标注网页的作者

     

    http-equiv属性

    相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为contentcontent中的内容其实就是各个参数的变量值

    1content-Type(显示字符集的设定)

    说明:设定页面使用的字符集。

    用法:<meta http-equiv="content-Type"content="text/html; charset=gb2312">

    2content-Language当浏览者访问你的网页时,浏览器会自动识别并设置网页中的语言

    用法:<metahttp-equiv="Content-Language" content="zh-cn" />

    3Expires(期限)

    说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

    用法:<meta http-equiv="expires"content="Fri,12 Jan 2001 18:18:18 GMT">

    注意:必须使用GMT的时间格式。

    4Pragma(cache模式)

    说明:禁止浏览器从本地计算机的缓存中访问页面内容。

    用法:<meta http-equiv="Pragma"content="no-cache">

    注意:这样设定,访问者将无法脱机浏览。

    5Refresh(刷新)

    说明:自动刷新并转到新页面。

    用法:<meta http-equiv="Refresh" content="2;URL">;(注意后面的分号,分别在秒数的前面和网址的后面,URL可为空)

    注意:其中的2是指停留2秒钟后自动刷新到URL网址。

    6Set-Cookie(cookie设定)

    说明:如果网页过期,那么存盘的cookie将被删除。

    用法:<meta http-equiv="Set-Cookie"content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT;path=/">

    注意:必须使用GMT的时间格式。

    7Window-target(显示窗口的设定)

    说明:强制页面在当前窗口以独立页面显示。

    用法:<meta http-equiv="Window-target"content="_top">

    注意:用来防止别人在框架里调用自己的页面。

     

     



    展开全文
  • 移动端常用UI框架

    万次阅读 2019-01-21 22:47:51
    作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率。 一、MUI ...

            作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率。

    一、MUI

            最接近原生APP体验的高性能前端框架,追求性能体验,是我们开始启动MUI项目的首要目标,轻量必然是重要特征

            MUI不依赖任何第三方JS库,压缩后的JS和CSS文件仅有100+K和60+K,鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI感觉也是我们的重要目标,MUI以iOS平台UI为基础,补充部分Android平台特有的UI控件

            官方链接:http://dev.dcloud.net.cn/mui/

    二、Frozen UI

            由腾讯团队开发,适用于使用手Q规范设计的Web页面,而针对非手Q规范的页面,可通过修改变量定制界面主题。可以按需选择需要的组件,也可以采用cdn和combo的方式按需加载。使用iconfont展示图标,包含了按钮,列表,表单,提示,弹窗等常用组件,新增文本,布局,1px, rem,文字截断,占位,两端留白,两端对齐等解决方案,同时解决了移动端屏幕适配问题。CSS使用模块化的样式命名和组织规范,使用sass编写css代码。

            官方链接:http://frozenui.github.io/

    三、Amaze UI

            Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。Amaze UI 面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让 Web 应用更快速载入。

            官方链接:http://amazeui.org/

    四、SUI Mobile 

            SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美,只需要引入我们的CDN文件就可以使用,并且能兼容到 iOS 6.0+ 和 Android 4.0+,非常适合开发跨平台Web App。

            官方链接:http://m.sui.taobao.org/

    五、Muse-UI 

            基于 Vue 2.0 和 Material Desigin 的 UI 组件库,Muse UI 拥有40多个UI 组件,用于适应不同业务环境。Muse UI 自定义主题方式极为优雅,仅需少量代码即可完成主题样式替换。Muse UI 基于 Vue2.0 开发,Vue2.0是当下最快的前端框架之一,小巧,api友好,可用于开发的复杂单页应用。

            官方链接:https://muse-ui.org/#/zh-CN

    六、AUI2.0

            AUI 2.0是一套全新的AUI框架,在1.X基础上进行了重新架构。结合实际项目出发,站在开发者和项目的角度,重新定义AUI框架。在2.0中使用了大量弹性响应式布局,采用容器+布局结构+控件的嵌套形式,方便开发者快速布局样式。我们充分吸取了AUI使用者的反馈意见和借鉴了市场上其他优秀UI框架,完成了2.0版本的开发。2.0遵循Google Material 设计规范,使用MIT开源协议。

            官方链接:http://www.auicss.com/doc/v/2/doc_id/1

    原创文章链接:http://www.zhicaipt.cn/hz_index/view/article_detail.html?id=46

    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            body,ul,li,dl,dt,dd,p,ol,h1,h2,h3,h4,h5,h6,form,img,table,fieldset,legend,input{margin:0; padding:0;}
            ul,li,ol{list-style:none;}
            img,fieldset{border:0; }
            img{display:block;}
            a{text-decoration:none; color:#333;}
            h1,h2,h3,h4,h5,h6,strong{font-weight:500;}
            body{ font-family:"微软雅黑";font-size: 24px;}
            input,a{outline:none;}
        </style>
        <script>           
           (function(doc, win) {
                var docEl = doc.documentElement,
                    isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                    dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                    dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放
                    dpr = 1,
                    scale = 1 / dpr,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
                docEl.dataset.dpr = dpr;
                var metaEl = doc.createElement('meta');
                metaEl.name = 'viewport';
                metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
                docEl.firstElementChild.appendChild(metaEl);
                var recalc = function() {
                    var width = docEl.clientWidth;
                    if (width / dpr > 750) {
                        width = 750 * dpr;
                    }
                    // 乘以100,px : rem = 100 : 1
                    docEl.style.fontSize = 100 * (width / 750) + 'px';
                };
                recalc()
                if (!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
            })(document, window);
       </script>
    </head>
    <body>
        22
    </body>
    </html>

     

    展开全文
  • 了解移动端app

    2020-09-28 19:05:52
    大致了解什么是移动端的app
  • web移动端

    2020-10-18 15:05:34
    设备宽度并没有太大的变大,随着科技的变化,能够让移动端显示的效果更加丰富,一个像素点,里面放的物理像素越来越多 iphone3G 1:1 iphone4-8 xr 11 2:1 手机里面的一个像素点,可以显示2*2个像素 ihp
  • HTML5移动端手机网站开发

    万次阅读 2018-06-28 20:19:21
    手写手机网站一般我们自己手动开发手机网站的话,基本可以划分两类来做到。...另一类是通过CSS3的Media标签(媒介查询)来实现。 在这里我们详细讲解下,利用添加meta标签来做手机网站。基本在网页头部我们只需添加四个...
  • 移动端常用的四个框架

    万次阅读 2019-03-12 20:09:51
    1:weUI ... 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 图片发自简书App ...做为开发者的我们可以不用写太多css,...
  • 移动端

    2019-10-13 21:14:10
    1 在移动端页面上双击会放大的问题 在移动端中,会出现双击的时候 页面会放大,问题在于在设置的时候 并没有设置好媒体查询的问题。 例: <meta name="viewport" content="width=device-width, initial-scale=...
  • 自适应单独编写移动版页面利用js实现访问PC端网页自动跳转到移动端 1.响应式 响应式布局的原理,主要是通过设置视口的的大小,然后通过CSS样式的控制来实现。 核心代码1 <meta name="viewport" content="width:...
  • 移动端前端适配方案(总结) -- 面试重点

    万次阅读 多人点赞 2018-08-15 20:29:01
    在网上搜了一下,很多面试都会被问到移动端适配方法的问题,最近看了一些文章,这里总结一下。 首先,谈一下目前为止出现的一些关于移动端适配的技术方案: (1)通过媒体查询的方式即CSS3的meida queries (2)...
  • vue项目移动端适配的方法

    万次阅读 2020-10-13 09:32:51
    1,安装 flexible和 postcss-px2rem(命令行安装) npm install lib-flexible --save npm install postcss-px2rem --save 简要介绍这两个包的用途: 例如在Galaxy S III: 例如在iphone6/7/8: ...
  • PC端table表在移动端怎么显示比较好

    千次阅读 2018-06-28 16:30:25
    PC端界面,element-ui el-table组件写的,如下图
  • pc端,移动端,客户端的区别

    万次阅读 2018-08-07 09:21:37
    pc端与移动端的区别 1、从兼容方面来说,pc考虑的是浏览器的兼容性,移动端考虑的是手机兼容性,因为目前不管是安卓还是ios手机,一般的浏览器都是webkit内核 2、从事件处理上说,移动端主要是触屏事件,而缺少...
  • 只需要在head里面加上&lt;meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"&gt;即可!
  • 移动端保存照片到手机相册

    千次阅读 2018-11-30 17:25:39
    使用vue 框架,什么a标签 download h5里的gallery canvas 都没啥用 下载的乱码文件 有没有大佬带带我这萌新
  • 移动端 js 下载文件

    万次阅读 2017-12-20 18:49:17
    移动端 js 下载文件 直接 window.location.href = ‘url’可以触发下载 但是 在 有些 安卓 原生自带浏览器中 不好用 这样 就可以解决 var myFrame= document.createElement(“iframe”); myFrame.src = ...
  • 不知道怎么把包放在这边给大家演示,我把官网地址放上来,大家直接看吧https://eleditor.fixel.cn/
  • 移动端 js关闭当前窗口

    千次阅读 2018-03-28 15:46:01
    移动端window.close() 不起作用, 微信端关闭当前页面: WeixinJSBridge.call('closeWindow');
  • css-移动端:acitve效果的实现

    千次阅读 2018-01-03 14:18:57
    移动端上的bug修复。移动前端与pc端的:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有“鼠标指针浮动在其上的元素”的情况,有也很少。 ...
1 2 3 4 5 ... 20
收藏数 199,603
精华内容 79,841
关键字:

移动端