X-UA-Compatible

  • IE8新加的一个设置，IE8以下浏览器不识别

  • 兼容性模式设置优先级：

    • 网页中指定的模式优先权高于服务器所制定的模式
    • 即 <mark>meta tag > http header</mark> 
    <meta http-equiv="X-UA-Compatible" content="IE=7">
# 以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge">
# 以上代码告诉浏览器IE8/9及以后的版本都会以最高版本IE来渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
# 以上代码chrome=1可以激活chrome frame

    注意：

    • X-UA-Compatible标头不区分大小写
    • 它必须在网页中除title元素和其他meta元素以外的其他元素之前，否则不起作用。
    • content的内容是IE=XXX，不能直接写值，否则不起作用。

meta

  • 关于viewport的设置详见：https://www.runoob.com/w3cnote/viewport-deep-understanding.html
  • 常用的head设置： 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  • 这里meta标签的作用就是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放，如果不这样设定的话，就会使用那个比屏幕宽的默认viewport，也就是layout viewout，这样就会出现横向滚动条。
  • <mark>移动设备上有三个viewport：</mark>
    • layout viewport： 移动设备为了正常显示那些为桌面浏览器设计的网站，一般会把viewport设为一个比较宽的值。
    • visual viewport:
      浏览器的可视区域大小
    • ideal viewport：
      移动设备的理想viewport,就是设备的屏幕宽度。

CSS

  • box-sizing: border-box;
  • outline: none;

rem

  • <mark>px</mark>

    • 相对长度单位，相对于示器屏幕分辨率而言
    • IE无法调整以px作为单位的字体大小

  • <mark>em</mark>

    • 相对长度单位，相对于当前对象内的字体尺寸大小。
    • 如当前对行内文本的字体尺寸未被人设置，则相对于浏览器的默认字体尺寸。
    • em的值并不是固定的，em会继承父级元素的字体大小。

    浏览器默认字高为16px，1em = 16px

为了简化换算，在body选择器设置font-size = 62.5%
，这样1em = 10px,那么就可以直接把原来的px除以10得到em的数值。要注意在父div中若重新设置了字体大小，那么在子div中的em就不再是以body中的设置作为标准了。就需要重新计算！！

  • <mark>rem</mark>

    • CSS3新增的一个相对单位，相对的是HTML根元素。
    • 除了IE8及更早版本外，所有浏览器均已支持rem.

    如果用户群都使用最新版的浏览器，推荐使用rem，如果考虑兼容性，就使用px或者两者同时使用。

tips

  • 对于没有设置Margin的行内Img元素，出现了间隔，原因：<mark>换行</mark>
  • 解决方案： 
<img src="img/flower.png"/><!-- --><span>我的勋章</span><i></i>
  • 不换行，或者在行头行位添加注释标记

max-width

  • 常用来实现移动端img随屏幕大小而自由变换大小 
img {
   
    max-width: 100%;
}
  • max-width相当于一个守门员，到了临界值才会去保证是这个最大值，如果外层div的宽度小于图片原始宽度，它就会发挥作用，max-width是控制溢出宽度、保证宽度不溢出。
  • 如果是默认宽度在父容器宽度范围之内，那就要使用min-width。
  • 移动端的实现通常配合设置外层div宽度为百分比来实现img的自由变换。

PC端和WAP端两套UI显示

  • 使用uaredirect进行判断是pc端还是wap端
  • 引入uaredirect.js
  • 跳转到你想跳转的页面 
<!--加在index.html的head里面，如果是wap端就会显示跳转页面，pc页面就会正常显示index.html页面-->
<script type="text/javascript"> uaredirect("uiIndex.html"); </script>