精华内容
下载资源
问答
  • 浏览器适配,各大浏览器适配,主流/冷门浏览器适配 flex布局问题 flex布局早在2009年就有了,到现在已经有了好几个版本。详细内容可查看这篇文章。flex布局兼容性 其中IE10部分支持2012,需要使用-ms-前缀。 而IE9不...

    浏览器适配,各大浏览器适配,主流/冷门浏览器适配

    flex布局问题
    flex布局早在2009年就有了,到现在已经有了好几个版本。详细内容可查看这篇文章。flex布局兼容性

    其中IE10部分支持2012,需要使用-ms-前缀。

    而IE9不支持flex布局:

    针对IE9以下的flex布局,git有一些三方js,例如flexibility但是并没有研究出来使用办法,其js会莫名添加一些样式,修改起来很麻烦。我使用的是css hack来解决IE适配。或者在开发初期就不要选择flex布局,改为float或者inline-block,当然里面也会有一些属性的差别,不多相比flex小很多,嗯,但是flex这么好用,怎么舍得不用呢
    在这里插入图片描述

    使用css hack解决兼容ie的办法如下:

    什么是CSS hack
    由于不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时,我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

    CSS hack的原理

    由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优先级对浏览器展现效果的影响,我们可以据此针对不同的浏览器情景来应用不同的CSS。
    CSS hack书写顺序:一般是将适用范围广、被识别能力强的CSS定义在前面。

    CSS hack分类

    CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
    (1)属性前缀法(即类内部Hack):例如 IE6能识别下划线"“和星号” * “,IE7能识别星号” * “,但不能识别下划线”",IE6~IE10都认识"\9",但firefox前述三个都不能认识。
    (2)选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。
    (3)IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

    CSS hack方式一:条件注释法

    这种方式是IE浏览器专有的Hack方式,引入js同理。

    所有的IE都起作用:
    <!--[if IE]>  <link rel="stylesheet" type="text/css" href="all-ie-only.css/> <![endif]-->
    IE以外的浏览器起作用:
    <!--[if !IE]><!-->  <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]-->
    只有IE7起作用:
    <!--[if IE 7]>  <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]-->
    只有IE6起作用:
    <!--[if IE 6]>  <link rel="stylesheet" type="text/css" href="ie6.css"/> <![endif]-->
    只有IE5起作用:
    <!--[if IE 5]>  <link rel="stylesheet" type="text/css" href="ie5.css"/> <![endif]-->
    只有IE5.5起作用:
    <!--[if IE 5.5000]>  <link rel="stylesheet" type="text/css" href="ie55.css"/> <![endif]-->
    只对IE6及以下的版本起作用:
    <!--[if lt IE 7]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/> <![endif]-->
    <!--[if lte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-down.css"/> <![endif]-->
    只对IE7及以下的版本起作用:
    <!--[if lt IE 8]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/> <![endif]-->
    <!--[if lte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-down.css"/> <![endif]-->
    只对IE8及以下的版本起作用:
    <!--[if lt IE 9]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/> <![endif]-->
    <!--[if lte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-down.css"/> <![endif]-->
    只对IE6及以上的版本起作用:
    <!--[if gt IE 5.5]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/> <![endif]-->
    <!--[if gte IE 6]>  <link rel="stylesheet" type="text/css" href="ie6-and-up.css"/> <![endif]-->
    只对IE7及以上的版本起作用:
    <!--[if gt IE 6]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/> <![endif]-->
    <!--[if gte IE 7]>  <link rel="stylesheet" type="text/css" href="ie7-and-up.css"/> <![endif]-->
    只对IE8及以上的版本起作用:
    <!--[if gt IE 7]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/> <![endif]-->
    <!--[if gte IE 8]>  <link rel="stylesheet" type="text/css" href="ie8-and-up.css"/> <![endif]-->
    

    CSS hack方式二:类内属性前缀法

    在标准模式中
    “-″减号是IE6专有的hack
    “\9″ IE6/IE7/IE8/IE9/IE10都生效
    “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
    “\9\0″ 只对IE9/IE10生效,是IE9/10的hack

    例如:

    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:red\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:blue\9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:black;  /* ie 6/7 - for ie7 */  
    _background-color:green;  /* ie 6 - for ie6 */  
    

    CSS hack方式三:选择器前缀法

    选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
    目前最常见的是
    *html *前缀只对IE6生效
    +html +前缀只对IE7生效
    @media screen\9{…} 只对IE6/7生效
    @media \0screen {body { background: red; }} 只对IE8有效
    @media \0screen,screen\9{body { background: blue; }} 只对IE6/7/8有效
    @media screen\0 {body { background: green; }} 只对IE8/9/10有效
    @media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
    等等
    结合CSS3的一些选择器,如html:first-child,body:nth-of-type(1),可以衍生出更多的hack方式,具体的可以参考下表
    在这里插入图片描述

    使用方法详情链接

    CSS3选择器结合JavaScript的Hack

    我们用IE10进行举例:
    由于IE10用户代理字符串(UserAgent)为:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0),所以我们可以使用javascript将此属性添加到文档标签中,再运用CSS3基本选择器匹配。

    JavaScript代码:

    var htmlObj = document.documentElement;
    htmlObj.setAttribute('data-useragent',navigator.userAgent);
    htmlObj.setAttribute('data-platform', navigator.platform );
    

    CSS3匹配代码:

    html[data-useragent*='MSIE 10.0'] #id {
        color: #F00;
    }
    

    CSS hack利弊
    一般情况下,我们尽量避免使用CSS hack,但是有些情况为了顾及用户体验实现向下兼容,不得已才使用hack。比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染,这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让IE8-的专属hack出马了。使用hack虽然对页面表现的一致性有好处,但过多的滥用会造成html文档混乱不堪,增加管理和维护的负担。相信只要大家一起努力,少用、慎用hack,未来一定会促使浏览器厂商的标准越来越趋于统一,顺利过渡到标准浏览器的主流时代。抛弃那些陈旧的IE hack,必将减轻我们编码的复杂度,少做无用功。

    提供一个利器,该网站提供了Chrome、IE6/7/8/9/10、Opera、Safari几个主流浏览器的CSS HACK,当然还有Javascript和Media Query Hack写法,内容更新快,是设计师和前端人员最佳选择。http://browserhacks.com/


    js的event.srcElement与event.target

    IE下,event对象有srcElement属性,但是没有target属性;
    Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:
    firefox 下的 event.target 等于IE 下的 event.srcElement
    解决方法:使用obj = event.srcElement ? event.srcElement : event.target;
    或: var evtTarget = event.target || event.srcElement;
    srcElement详细属性用法链接

    js的.innerHTML = ""IE9下显示有错误的解决方法
    使用JQuery的dom.html()解决

    ie9 img需要指定高度

    原文链接:https://www.jianshu.com/p/2a9dc4990e09

    展开全文
  • css样式、各个浏览器适配text-alignbackground-colorline-heightfloat清除浮动a标签去掉下划线滚动条样式修改 text-align text-align: center; /*IE*/ text-align: -moz-center; /*Firefox*/ text-align: -webkit-...

    text-align

    text-align: center; /*IE*/
    text-align: -moz-center; /*Firefox*/
    text-align: -webkit-center; /*Chrome*/
    

    background-color

    background-color:orange;  /* all - for Firefox/Chrome */  
    background-color:orange\0;  /* ie 8/9/10/Opera - for ie8/ie10/Opera */  
    background-color:orange\9\0;  /* ie 9/10 - for ie9/10 */  
    *background-color:orange;  /* ie 6/7 - for ie7 */  
    _background-color:orange;  /* ie 6 - for ie6 */ 
    

    line-height

    line-height: 35px\9; /*IE8*/
    *line-height: 35px; /* IE7支持 */ 
    _line-height: 35px; /* IE6支持 */ 
    -ms-line-height: 35px;/*IE9+支持*/
    -webkit-line-height: 1; /*chrome safair*/
    -moz-line-height: 35px;/*火狐*/
    

    float清除浮动

    <div class="clearfix">
    	<div class="f-left">左侧</div>
    	<div class="f-right">右侧</div>
    </div>
    
    .f-left {
      float: left;
    }
    
    .f-right {
      float: right;
    }
    .clearfix:after {
      /*伪元素是行内元素 正常浏览器清除浮动方法*/
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    
    .clearfix {
      *zoom: 1;
      /*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
    }
    

    a标签去掉下划线

    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    

    滚动条样式修改

    .el-textarea__inner{
      overflow: auto;
      /*三角箭头的颜色*/
      scrollbar-arrow-color: rgb(193, 193, 193);
      /*滚动条滑块按钮的颜色*/
      scrollbar-face-color: rgb(193, 193, 193);
      /*滚动条轨道颜色*/
      scrollbar-track-color: rgb(255, 255, 255);
    }
    .el-textarea__inner::-webkit-scrollbar {
      width: 7px;
      height: 7px;
      background-color: rgb(241, 241, 241);
      border-radius: 3px;
    }
    
    .el-textarea__inner::-webkit-scrollbar-thumb {
      background-color: rgb(193, 193, 193);
      border-radius: 3px;
    }
    
    展开全文
  • 浏览器适配

    2019-03-31 15:37:38
    rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。 em 单位基于使用他们的元素的字体大小。 rem 单位基于 html 元素的字体大小。 em 单位可能受任何继承的父元素字体大小影响 rem 单位可以从...

    让我们以一个快速符号点概括我们介绍的内容:

    rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
    em 单位基于使用他们的元素的字体大小。
    rem 单位基于 html 元素的字体大小。
    em 单位可能受任何继承的父元素字体大小影响
    rem 单位可以从浏览器字体设置中继承字体大小。
    使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
    在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
    使用rem单位,除非你确定你需要 em 单位,包括对字体大小。
    媒体查询中使用 rem 单位
    不要在多列布局中使用 em 或 rem -改用 %。
    不要使用 em 或 rem,如果缩放会不可避免地导致要打破布局元素。

    展开全文
  • 在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备...

    目录

    1.css尺寸介绍

    单位描述备注
    %百分比相对
    in英寸绝对
    cm厘米绝对
    mm毫米绝对
    ex, ch分别是 小写x的高度 和 数字0的宽度。相对
    pt磅 (1 pt 等于 1/72 英寸)绝对
    pc12 点活字 (1 pc 等于 12 点)。Points (1/72 of an inch), picas (12 points.)。绝对
    px像素 (计算机屏幕上的一个点)绝对
    em1em 等于当前的字体尺寸。如,如果某元素以 12pt 显示,那么 2em 是24pt。相对
    rem和em以同样的方式工作,但它总是等于默认基础字体(html的font-size)大小的尺寸;相对
    vw视口宽度的1/100。1vw = 1% of viewport width。相对
    vh视口高度的1/100,1vh = 1% of viewport height。相对
    vmin&vmax1vmin = 1vw or 1vh, 最小。1vmax = 1vw or 1vh, 最大。相对

    2.视口基础

    一个典型的针对移动端优化的站点包含类似下面的内容:

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

    该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条。

    属性描述
    width设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
    initial-scale设置页面的初始缩放值,为一个数字,可以带小数
    minimum-scale允许用户的最小缩放值,为一个数字,可以带小数
    maximum-scale允许用户的最大缩放值,为一个数字,可以带小数
    height设置layout viewport 的高度,这个属性对我们并不重要,很少使用
    user-scalable是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许

    第一、如果不设置meta viewport标签,那么移动设备上浏览器默认的宽度值为800px,980px,1024px等这些,总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px,它跟代表实际屏幕物理像素的px不是一回事。

    第二、每个移动设备浏览器中都有一个理想的宽度,这个理想的宽度是指css中的宽度,跟设备的物理宽度没有关系,在css中,这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度,如果不知道这个设备的理想宽度是多少,那么用device-width这个特殊值就行了,同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。所以,我们可以使用

    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    来得到一个理想的viewport

    3.像素并非像素

    ss中的1px并不等于设备的1px
    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。

    还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。关于这点,在文章后面的部分还会讲到。

    在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素。但是要注意的是,devicePixelRatio在不同的浏览器中还存在些许的兼容性问题,所以我们现在还并不能完全信赖这个东西,具体的情况可以看下这篇文章。

    4.rem的几种解决方案

    4.1 方案1,针对各个分辨率范围在html上设置font-size

    rem相对于根元素的字体大小的单位。通过css的媒体查询或者通过js根据文档视口宽度动态计算得到的html根元素的字体大小的值。另外值得说的是即使采用了rem布局方案,页面上不一定所有的元素都是采用rem作为单位。比如微信的WEUI框架。

    html {font-size: 20px;}
    @media only screen and (min-width: 400px) {html {font-size: 21.33px !important;}}
    @media only screen and (min-width: 414px) {html {font-size: 22.08px !important;}}
    @media only screen and (min-width: 480px) {html {font-size: 25.6px !important;}}
    

    该方案的缺点会比较明显,不同尺寸梯度变换的时候,显示的尺度落差比较大,过度不平滑,而且显示比例不可控制,用户体验较差。

    4.2 方案2,通过视口的宽度的比值动态算出html根元素的字体大小

    设置文档的html {font-size: 4.26667vw !important;}值,为何是4.26667乘以vw?
    看如下的例子,我们设定当前视口的宽度为iPhone6的375宽度,并设定body的字体大小为<body style="font-size:16px;">16px;然后在设置示例“字体1”和“字体2”的字体大小,分别为“继承”和“1rem”,然后通过浏览器调试获取元素大小;“字体1和字体2的大小一样”,默认情况下html的1rem = 16px,也就是说“4.26667”可以作为一个基准的比例。

    <html lang="zh-Hans"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">
    <style>html {font-size: 4.26667vw !important;}</style>
    </head>
    <body style="font-size:16px;">
      <span>你大爷</span><span style="font-size: 1rem;">你大爷</span>
    </body></html>
    

    在这里插入图片描述
    在这里插入图片描述

    4.3 方案3,阿里团队的方案,推荐方案

    找不到

    4.4 方案4,淘宝触屏版的方案

    淘宝触屏版(webapp版本),此方案是默认 1rem = 100px,所以布局的时候是可以按照设计师给的效果图设置显示大小。例如,在效果图上量取的某个按钮元素宽、高是60px、38px,那样式就可以这样设置 .btn{width: 0.6rem;height: 0.38rem;}

    !function (e, t) {
                var n = t.documentElement,
                    d = e.devicePixelRatio || 1;
                function i() {
                    var e = n.clientWidth / 3.75;
                    n.style.fontSize = e + "px"
                }
                if (
                    function e() {
                        t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)
                    }(),
                    i(),
                    e.addEventListener("resize", i), e.addEventListener("pageshow",
                        function (e) {
                            e.persisted && i()
                        }),
                    2 <= d
                ) {
                    var o = t.createElement("body"),
                        a = t.createElement("div");
                    a.style.border = ".5px solid transparent",
                        o.appendChild(a),
                        n.appendChild(o),
                        1 === a.offsetHeight && n.classList.add("hairlines"),
                        n.removeChild(o)
                }
            }(window, document)
    

    4.5 方案5,另一种

    !(function (win, doc) {
      var root = doc.documentElement;
      function init() {
        var w = root.clientWidth || win.innerWidth;
        w = w < 320 ? 320 : w;
        root.style.fontSize = w >= 640 ? '100px' : (w / 3.75 + 'px');
        doc.body.style.fontSize = '16px';
      }
      win.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', init, false);
      doc.addEventListener('DOMContentLoaded', init, false);
    })(window, document);
    
    • 为何要视口宽度除以3.75
      该方案也采用,默认 1rem = 100px,在iPhone6下视口宽度刚好是375,将其作为一个基准。所以布局的时候是可以按照设计师给的效果图设置显示大小。例如,在效果图上量取的某个按钮元素宽、高是60px、38px,那样式就可以这样设置 .btn{width: 0.6rem;height: 0.38rem;}

    • 示例中为何采用宽度最小320或者最大640呢?
      第一,宽度最大640,一般设计的效果图的宽度默认为640px或者750,这是一个安全宽度,这个是出于显示美观考虑,提升用户体验。
      第二,宽度最小320纯属于避免别人说你代码有bug,有些人比较喜欢转牛角尖。

    • 为何要使用这种方案?
      第一,我们目前的项目目前还停留在通过css文件的样式内容控制布局
      第二,我们没有使用模板引擎像“淘宝触屏版(webapp版本)”那样,通过js动态计算后控制显示样式。
      所以目前只能采用这种简单粗暴的解决方案。

    展开全文
  • 手机浏览器适配web

    2020-04-30 17:45:14
    转载:https://www.jianshu.com/p/2c33921d5a68 另一篇文章:https://www.jianshu.com/p/cf600c2930cb
  • 获取当前浏览器的名称2. 对不同的浏览器进行不同的操作3. 完整例子 1. 获取当前浏览器的名称 var browser = navigator.appName; 2. 对不同的浏览器进行不同的操作 string.search(key) 的作用是查找是否存在此...
  • 1、插件安装 npm安装: npm install postcss-pxtorem --save-dev npm install lib-flexible --save yarn安装: yarn add postcss-pxtorem --save-dev yarn add lib-flexible --save 2、配置vue.config.js ...
  • <script> var width=document.documentElement.clientWidth; var height=document.documentElement.clientHeight; console.log(width) console.log(height) ...
  • 要搞清楚浏览器内核是什么,首先应该先搞清楚浏览器的构成。简单来说浏览器可以分为两部分,shell+内核。其中shell的种类相对比较多,内核则比较少。Shell是指浏览器的外壳:例如菜单,工具栏等。主要是提供给用户...
  • <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">... /* 浏览器私有前缀: -webkit- : 谷
  • 转自 https://blog.csdn.net/wcy7916/article/details/83345705 转载于:https://www.cnblogs.com/justsilky/p/10219684.html
  • 1、使用rem进行浏览器适配:比较常用 rem(fontsizeoftherootelement)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem一定会想起em单位,em(fontsizeoftheelement)是指相对于父元素的...
  • 因为pc浏览器端不比手机端,手机分辨率除了ipad等特别的,一般只需要把背景...主canvas的适配代码,监听浏览器窗口变化,设置canvas的适配设计比例1920*1080 onLoad() { this.updateSizeFit(); let _this = this;.
  • CSS浏览器适配设置

    千次阅读 2016-05-29 21:17:09
    1、适配语法 选择器名称 { 属性:方法(值); -webkit-属性:方法(值);  /*safari chrome*/ -ms-属性:方法(值); /*IE*/ -o-属性:方法(值); /*opera*/ -moz-属性:方法(值); /*Firefox*/ ...
  • Rem 布局适配 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 一、npm安装 npm...
  • 新的iphonex因为没有实体...先看看所遇到的问题下面是未经适配iphonex下的各浏览器的展示情况: safari的截图: chrome的截图:UC浏览器:QQ浏览器:手机QQ内嵌浏览器:微信内嵌浏览器: 得出结论 可以看出fiexd定位的部分...
  • 浏览器适配 Rem 布局适配 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem是一款 postcss 插件,用于将单位转化为 rem lib-flexible 用于设置 rem 基准值 Post...
  • 手机浏览器适配

    2016-11-17 15:17:14
    手机浏览器适配
  • 为什么要对css属性进行浏览器兼容性总结呢?用的时候,直接去 Can I Use 里面检索浏览器对该属性的兼容性情况不就好了吗? css3.jpeg 其实,在实际的开发过程中,我们对常见的css属性兼容情况了然于胸,才能极大的...
  • 浏览器适配前缀

    2016-09-07 15:01:00
    WebKit内核 -webkit- Comodo Drangon(科摩多龙),苹果,搜狗高速浏览器3,快快浏览器,枫树浏览器,云游浏览器,360极速浏览器,世界之窗极速版,SRWare Iron,猎豹浏览器,RockMelt,QQ浏览器 Presto内核 -o- ...
  • HTML5与浏览器适配

    2021-01-01 08:35:12
    1.在html4的基础上增加了一些功能,有...2.HTML3/4/5都是标准,需要浏览器的实现。 ... 4.浏览器对不同标准的支持与实现都不一样,导致同样的网页现实效果不同 5.浏览器厂商对HTML5表示出了极大的热情,基本同一了。 ...
  • iPad的Safari浏览器适配小结
  • CSS 多浏览器兼容性问题及解决方案一、document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements [“elementName”];Firefox 下...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 50,763
精华内容 20,305
关键字:

浏览器适配