移动端_移动端开发 - 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">

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

     

     



    展开全文
  • 移动端前端适配方案(总结) -- 面试重点

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

    在网上搜了一下,很多面试都会被问到移动端适配方法的问题,最近看了一些文章,这里总结一下。

    首先,谈一下目前为止出现的一些关于移动端适配的技术方案:

        (1)通过媒体查询的方式即CSS3的meida queries
        (2)以天猫首页为代表的 flex 弹性布局
        (3)以淘宝首页为代表的 rem+viewport缩放
        (4)rem 方式
    

    1.Media Queries

    meida queries 的方式可以说是我早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的 css 代码,最终达到界面的配置。核心语法是:

    @media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
      /*你的css代码*/
    }

    优点

    • media query可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候。目前像Bootstrap等框架使用这种方式布局
    • 图片便于修改,只需修改css文件
    • 调整屏幕宽度的时候不用刷新页面即可响应式展示

    缺点

    • 代码量比较大,维护不方便
    • 为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源
    • 为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式

    2.Flex弹性布局
    以天猫的实现方式进行说明:

    它的viewport是固定的:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    这里写图片描述

    高度定死,宽度自适应,元素都采用px做单位。

    随着屏幕宽度变化,页面也会跟着变化,效果就和PC页面的流体布局差不多,在哪个宽度需要调整的时候使用响应式布局调调就行(比如网易新闻),这样就实现了『适配』。



    3.rem + viewport 缩放
    这也是淘宝使用的方案,根据屏幕宽度设定 rem 值,需要适配的元素都使用 rem 为单位,不需要适配的元素还是使用 px 为单位。(1em = 16px)

    PSrem 
    remCSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?
    区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对
    大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁
    反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一
    个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。比如:p{font-size:14px;font-size:0.875rem;}
    (推荐一个单位转换的工具:http://pxtoem.com/)

    实现原理
    根据rem将页面放大dpr倍, 然后viewport设置为1/dpr.

    如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px(css单位)在plus下默认为3px(物理像素)
    然后viewport设置为1/3, 这样页面整体缩回原始大小. 从而实现高清。


    这里写图片描述
    mobile-fe4.png
    这里写图片描述
    mobile-fe3.png

    这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小,也就是device-width
    这个device-width的计算公式为:设备的物理分辨率/(devicePixelRatio * scale)
    在scale为1的情况下,device-width = 设备的物理分辨率/devicePixelRatio



    4、rem实现
    比如说“魅族”移动端的实现方式,viewport也是固定的:
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    通过以下代码来控制rem基准值(设计稿以720px宽度量取实际尺寸)

    !function (d) {
        var c = d.document;
        var a = c.documentElement;
        var b = d.devicePixelRatio;
        var f;
    
        function e() {
          var h = a.getBoundingClientRect().width, g;
          if (b === 1) {
            h = 720
          }
          if(h>720) h = 720;//设置基准值的极限值
          g = h / 7.2;
          a.style.fontSize = g + "px"
        }
    
        if (b > 2) {
          b = 3
        } else {
          if (b > 1) {
            b = 2
          } else {
            b = 1
          }
        }
        a.setAttribute("data-dpr", b);
        d.addEventListener("resize", function () {
          clearTimeout(f);
          f = setTimeout(e, 200)
        }, false);
        e()
      }(window);

    css通过sass预编译,设置量取的px值转化rem的变量$px: (1/100)+rem;
    这里写图片描述


    1像素边框高清

    1.淘宝实现方式
    上面说到的淘宝的实现方式即rem+viewport 缩放来实现。

    transform: scale(0.5)

    CSS代码:

    div{
        width: 1px;
        height: 100%;
        display: block;
        border-left: 1px solid #e5e5e5;
        -webkit-transform: scale(.5);
        transform: scaleX(.5);
    }

    缺点:

    圆角无法实现,实现4条边框比较麻烦,并且只能单独实现,如果嵌套,会对包含的效果产生不想要的效果,所以此方案配合:after和before独立使用较多。

    box-shadow

    实现方法:
    利用CSS对阴影处理的方式实现0.5px的效果。

    -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

    优点:

    基本所有场景都能满足,包含圆角的button,单条,多条线。

    缺点:

    颜色不好处理, 黑色 rgba(0,0,0,1) 最深的情况了。有阴影出现,不好用。
    大量使用box-shadow可能会导致性能瓶颈。
    四条边框实现效果不理想。

    2.图片实现

    使用 background-image 实现1px有两种方式: 渐变 linear-gradient 或直接使用图片(base64)。

    渐变 linear-gradient (50%有颜色,50%透明)

    单条线:

    div{
        height: 1px;
        background-image:-webkit-linear-gradient(top,transparent 50%,#000 50%);
        background-position: top left;
        background-repeat: no-repeat;
        background-size: 100% 1px;
    }

    多线条:

    div{
        background-image: -webkit-linear-gradient(top,transparent 50%,#000 50%),
        -webkit-linear-gradient(bottom, transparent 50%, #000 50%),
        -webkit-linear-gradient(left, transparent 50%, #000 50%),
        -webkit-linear-gradient(right, transparent 50%, #000 50%);
        background-size: 100% 1px,100% 1px,1px 100%,1px 100%;
        background-repeat: no-repeat;
        background-position: top left, bottom left, left top, right top;

    优点:
    可以设置单条,多条边框
    可以设置颜色

    缺点:
    大量使用渐变可能导致性能瓶颈
    代码量大
    多背景图片有兼容性问题



    展开全文
  • <!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>

     

    展开全文
  • 课程讲解了图标设计、交互设计、移动端的规范及动效设计。 通过学习可以运用PS、Axure、Sketch、AE等进行移动端的全流程设计。
  • 移动端基础篇

    2020-04-26 17:40:29
    移动端基础 图片格式: DPG图片压缩技术 京东自主研发推出DPG图片压缩技术,经测试该技术,可直接节省用户近50%的浏览流量,极大的提升了用户的网页打开速度。能够兼容jpeg,实现全平台、全部浏览器的兼容支持,...
  • 移动端的坑

    2019-05-14 17:00:12
    这里收集了许多移动端上遇到的各种坑与相对解决方案 Babel下的ES6兼容性与规范 ##工具类网站 HTML5 与 CSS3 技术应用评估 各种奇妙的hack 几乎所有设备的屏幕尺寸与像素密度表 移动设备参数表 ios端移动设备...
  • 移动端

    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:...
  • 移动端常用UI框架

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

    万次阅读 多人点赞 2020-03-27 19:46:45
    前端移动端开发的时候肯定是会面对不同型号的手机的页面展示问题的,今天给大家推出另外一种自适应不同移动端的方法,使用vw,vh单位。 vw和vh单位的大小是多少? vw和vh是根据设备的宽度和高度来决定的,设备的宽...
  • 从零开始学习移动端Web开发

    万次阅读 多人点赞 2017-05-11 14:28:20
    背景 近年来,随着智能手机的普及,移动端开发受到了异常的关注。从传统的安卓、IOS原生手机系统应用开发,转向了移动端Web开发或者是混合开发,既然有需求,那就让我们一起来学习移动端Web开发吧。本文旨在让读者以...
  • 基于vue的UI框架集锦(移动端+pc端)

    万次阅读 多人点赞 2018-04-26 18:09:42
    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k中文文档 在线预览2.vux 基于WeUI和Vue(2.x)开发的移动端UI组件库 star 10k基于webpack...
  • web页面PC端和移动端的区别

    万次阅读 2018-10-17 10:48:13
    PC端和移动端的区别你知道吗? 截至2015年11月,中国手机上网用户数已超过9.05亿,软件移动化成为一种趋势,移动产品经理成为了产品经理的一个重要分支,那么对于移动端和PC端到底有什么区别呢?在设计过程中有什么...
  • 我们很多朋友开发移动端的时候只知道在浏览器中开控制台(按F12就可以打开控制台了)然后点击小手机在浏览器中模拟手机,就像下面这样: 但是并不知道如何在开发的过程中在手机上调试。只有上线后才通过下载软件或...
  • 浅谈移动端页面性能优化方案

    千次阅读 2019-06-11 12:04:29
    众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端。比如淘宝双11,在移动端支付的接近7成。这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑战...
  • 移动端H5 QQ在线客服链接代码

    万次阅读 2016-07-06 10:14:24
    很难找,在网上找了很久都没有找到,最终在群里问朋友,才找到这段代码.虽然代码不长,但是建议需要的朋友收藏一下.绝对有效!移动端H5 QQ在线客服链接代码报名咨询经过测试,安卓没有问题,IOS能到QQ
  • web移动端布局方法

    千次阅读 2019-04-02 15:37:38
    移动端布局分类 移动端的布局主要分为四类,分别是流式布局,rem布局,响应式布局和弹性布局。 流式布局(百分百布局): 定义: 使用非固定像素来定义网页内容,也就是百分比布局,通过盒子的宽度设置成百分比...
  • video — 移动端适配

    千次阅读 2018-09-11 18:35:25
    最近做微信内H5分享页&lt;内嵌视频&gt;,适配移动端时,欲哭无泪,各种坑。...但该属性在移动端不兼容(移动端为了避免浪费用户的网络流量,默认不允许媒体文件自动播放)。 &lt;vi...
  • 深度学习模型在移动端的部署

    千次阅读 2019-04-27 14:51:17
    自从 AlphaGo 出现以来,机器学习无疑是当今最火热的话题,而深度学习也成了机器学习领域内的热点,现在人工智能、大数据更是越来越贴近我们的日常生活,越来越多的人工智能应用开始在移植到移动端上,那能够快速...
1 2 3 4 5 ... 20
收藏数 199,711
精华内容 79,884
关键字:

移动端