服务热线:400-889-1636
业务联系:021-5230 0317
客户服务:021-5230 0319
在线咨询: 
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
首页 求创资讯 响应式网站响应式网站 布局 response
求创动态行业资讯网站建设网页设计微网站手机网站H5动画系统开发APP开发交互设计微信小程序网站维护

    响应式网站 布局 response

  • 来源:CSDN
    作者:
    转载时间:2019-7-17 13:37:39

一.  响应式布局:

响应式优缺点:

  • 优点: 节省时间,减少工作量,每个设备都得到正确的设计,搜索优化...
  • 缺点: 加载更多的样式和脚本资源,设计较难的的精确控制,老版本兼容性不好...

响应式网站设计实践原则:

  • 渐进增强
  • 优雅降级

主要知识点:

  • @media
  • 响应式单位 rem
  • picture 响应式图片

网站

  • https://jeft-hai.github.io/response/#

二. @media

媒体查询

  • 查询符 not、and、or、only
  •  not: 有效范围到","
  •  and: 全部符合
  •  or: 符合其中一个,等同","
  •  only: 防止老旧的浏览器,不支持带媒体属性的查询

设置viewport视口

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

@media

@media only screen and (max-width:30em;) 1em = 1rem = 16px; @media级别不在html之下

常用断点:

  • 超大屏PC 1200/1170  pc/平板横屏 980  平板  768 平板竖屏/手机横屏 480 手机 320 手机 0

5. Css Resets

* 每个浏览器特定标签的解释都有差异
* reset.css: 重置浏览器的css默认样式,浏览器的品种不同样式不同,然后重置,让他们统一
* normalize.css: 保留有用的浏览器默认样式,而不是一概的将它们抹杀,normalize.css作用在范围更广的元素上面,修正了一些bug及主流浏览器在渲染上的不一致


三. 三个单位px,em,rem

 

  •  px

1px相当于1像素

  • em

  参照物为父元素的font-size;
  em具有继承的特点;
  没有参照物时,浏览器会默认设置: 1em = 16px;

  • rem

  参照物为 根元素html,固定不变
  没有设置font-size时,默认设置: 1rem = 16px;
  html{font-size: 62.5%;} 1rem = 62.5%^16px=10px;

四. picture响应式图片

 

<picture>     <source srcset="img/ad001-l.png" media = "(min-width:50em)">     <source srcset="img/ad001-m.png" media = "(min-width:30em)">     <img src="img/ad001.png"> </picture>

五. 兼容性

@media 

不支持ie9及以下,要用respond.js

https://blog.csdn.net/jeft_hai/article/details/82317780;

picture
引入picturefill,(polyfill)

<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.js"></script>

六. 横屏 竖屏

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> // 竖放加载 <link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css"> // 横放加载

//竖屏时使用的样式 <style media="all and (orientation:portrait)" type="text/css"> #landscape { display: none; } </style> //横屏时使用的样式 <style media="all and (orientation:landscape)" type="text/css"> #portrait { display: none; } </style>

七. dpr

var dpr, rem, scale; var docEl = document.documentElement; var fontEl = document.createElement('style'); var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr; // 设置viewport,进行缩放,达到高清效果 metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no'); // 设置data-dpr属性,留作的css hack之用 docEl.setAttribute('data-dpr', dpr); // 动态写入样式 docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}'; // 给js调用的,某一dpr下rem和px之间的转换函数 window.rem2px = function(v) {
    v = parseFloat(v); return v * rem;
}; window.px2rem = function(v) {
    v = parseFloat(v); return v / rem;
}; window.dpr = dpr; window.rem = rem;
本文内容为转载,如原作者有异议,请联系本站撤除。
  • TOP

  • 关于我们

    上海求创科技有限公司成立于2001年,是一家专注于为客户提供高端网站策划、网站建设、网页设计、品牌网络营销以及相关的基于互联网应用服务的专业公司。

    更多

    全国客户服务热线

    400-889-1636

    网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-微官网 网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-手机网
    友情链接: 域名超市 | 苏州网站优化 | 手机网站建设 | 营销型网站建设 | 企业网站建设 | 网页设计 | 网站建设 | 网站优化 | 网站设计 | IPv6 升级 | 微信开发 | H5开发 | 系统开发 | 网站维护 | 海外社会化媒体推广 | 上海网站设计 |
    业务热线:021-52300315 021-52300317 业务部:sales@dn.cn 售后服务:service@dn.cn 投诉邮箱:info@dn.cn 域名和主机服务:021-52300319
    地址:上海市静安区镇宁路168号16楼A室 邮政编码:200040
    版权所有©上海求创科技有限公司 沪ICP备13005298号-24  网站地图 沪公网安备 31010602003962号