编写响应式网站的几点要素

编写响应式网站的几点要素
(1) 在HEAD标签中声明viewport元标签
    <meta name="viewport" content="width=device-width,init-scale=1,user-scalable=0" />
(2) 不使用绝对的宽度,元素的宽度使用百分比
    margin,padding 影响不大
(3) 字体,要使用倍率, em
    e.g
       body{
           font:normal 100% Helvetical
       }
       div{
           font-size:1.5em;
       }
(4) 采用流式布局,浮动定位 
      .test{
          float:right;
          width:70%;
      }      
(5) 图片的自适应
      img{
          max-width:100%
      } 
      此外,还可以修改<base>的href属性值,针对不同的浏览器,指定不同的图片
      加载路径
(6) CSS MediaQuery, 使用媒体查询加载不同的css文件
(7) CSS MediaQuery,
    <link rel="stylesheet" media="screen and (min-width:980px) and (max-width:1080px) " href="" />

猜你喜欢

转载自blog.csdn.net/u014660247/article/details/80859666