一款响应式的网站Demo

最新推荐文章于 2022-10-18 07:47:13 发布

一天一颗蛋的开心

最新推荐文章于 2022-10-18 07:47:13 发布

阅读量2.1k

点赞数

分类专栏：个人作品文章标签： github 响应式浏览器手机

本文链接：https://blog.csdn.net/Chenkaixin0512/article/details/77799683

版权

个人作品专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本作品原始灵感来源慕课网实战视频，如果大家有需要可以star我的GitHub，里面还有许多实战的源码，之后也会不断更新。
接下来记录一些编程当中的重难点

viewport视口

对于PC端：
视口就是浏览器主窗口的区域
对于手机端：
layout port布局视口：一个虚拟的视口，一般是960px来把页面先进行渲染
visual port可视视口：一个网页在手机上呈现出来的区域的宽度，用户的缩放会改变可视视口的大小，不会改变布局视口的大小
ideal port理想视口：布局视口在一个设备上的最佳尺寸，理想视口下的页面便于浏览器的浏览和阅读（针对移动端），即设置<meta name="viewport" content="width=device-width" />使得布局视口等于可视视口，这样布局视口就成为了理想视口，若不指定则会是厂商默认的可能960px的布局视口
相当于用放大镜（可视视口）来看书（布局视口）

清除浮动

场景：父元素container里的p和div设置了float，则父元素会发生高度塌陷
+ 方法1：在父元素内最后的位置添加一个div，style设为clear=both。但是添加了一个废的标签，不利于维护。
+ 方法2：给父元素添加一个overflow：auto或者hidden,因为这样浮动的元素又会回到容器内，撑起容器的高度
+ 方法3：给浮动元素的容器添加浮动属性也能够解决内部浮动的效果，但是父元素也产生了同样的问题
+ 方法4：类似于第一种方法，在父元素的最后添加一个看不见的伪元素（一个冒号和两个冒号都可以，要求新伪元素用两个冒号如::selection，在这里使用一个，兼容性比较好）

.clearfix:after {
    content: '.';
    display: block;
    height: 0;/*避免生成的元素破坏原有的高度*/
    clear: both;/*清除浮动*/
    visibility: hidden;/*让生成的元素不可见*/
}
.clearfix {
    zoom: 1;
}

zoom是IE专用属性，firefox等是不支持的。它的本来作用是设置或检索对象的缩放比例，但这作用几乎用不到。
可以让网页实现IE7中的放大缩小功能。比如你想让你的网页缩小为原来的一半，那么就在body中加入style=”zoom:0.5”
为了兼容IE6、7，因为只有令zoom=1才能够出发hasLayout，才能够达到清除浮动
+ 方法5：根据BFC的概念，以下属性都能触发BFC，达到清除浮动

float: left;/*除了none*/
    overflow: auto;/* 除了visible*/
    display: inline-block;
    display: table-cell;
    display: table-caption;
    position: fixed;
    position: absolute;

方法4中太多语句与清除浮动无关，可以改进的更优雅

.clearfix:before,/*防止浏览器顶部的空白崩溃，即下面元素的margin-top和上面元素的margin-bottom发生叠加*/
.clearfix:after {
    content: " ";
    display: table;/*创造一个匿名的表格单元触发BFC*/
}

响应式图片的实现

方法1：利用js或者服务器来实现（命令式的实现）
通过 $(window).on(‘resize load’, makeImageResponsive)来对浏览器窗口的调整绑定一个事件，事件里通过获取$ (window).width()，并判断他的大小来动态的通过img.attr(‘src’,’XXX’)来设置img的src属性。
方法2：使用srcset来实现（声明式的实现）
在img标签中添加srcset属性，例如下：

<img src="XXX.png" srcset="img/480.png 480w, img/800.png 800w"/>//其中480w对应宽度为480px。

不足：
+ 当浏览器已经加载过大图片时，调整会小窗口仍旧会默认使用大图。
+ 当图片父容器宽度不是100%，比如50%时，图片宽度设为100%，此时窗口480w时，图片只有240w，但仍旧会按照480w去调整。
方法3：配合sizes使用srcset（一组条件的匹配）
在img标签中再添加sizes属性（默认为100vm，即使用100%视口宽度去选择图片）
例：sizes=”(min-width:800px), 800w, 100vw”
表示视口宽度大于800px时，都是用800宽度的图片，其余时候使用100%视口宽度去选择图片。（实际应用时，800w这里通常使用clac()动态计算，因为有边框间距等因素）

<img
  sizes="(min-width: 40em) 80vw, 100vw"
  srcset="examples/images/medium.jpg 375w,
          examples/images/large.jpg 480w,
          examples/images/extralarge.jpg 768w"
  alt="…">

方法4：使用source，通过媒体查询设置不同的图片（多组条件的匹配）
浏览器会像对audio和video标签一样去遍历所有source。例：

<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" alt="2015年度报告">
</picture>

这里还可以利用source去添加对于不同格式图片的匹配。

<source media="(max-width:36em)" srcset="img/480.png 480w"/>
<source srcset="img/960.png 960w"/>
<img src="img/ad001-l.png">

方法5：使用svg图片
优点：缩放时不会变形；兼容性方面比picture和source要好得多。缺点：与位图相比，很难去表现色彩丰富的图片

Small Tips

section和article：section比article更广泛的一些，只要是需要出现的页面大纲中的区块都可以使用section，而article更语义化一些（nav也是），是某些具有图文信息的section，不确定的时候就用section
b仅仅代表加粗，不代表任何重点；em代表重点强调；i代表这段话有不同的语义，使用了一些譬如反讽的技巧等
定义样式一般使用class，class名一般都用小写，用中横线来分隔不同的单词；id都使用首字母小写的驼峰式写法
如果用户禁用样式，那么使用css中的background定义图片就看不到了
传统的css reset会把所有的页面的样式全部清除，而且会有大量的继承链，而normalize.css较于css reset保护了有价值的部分css，还修复了许多移动端和pc的呈现的bug
px可以针对设计稿比较精确地的还原，但是在响应式设计中显得力不从心，因此设计稿大多都是一个样式的示意，在改变屏幕大小的时候会有很多变化
em是相对的长度单位，相对的参照物是父元素的font-size，具有继承的特点，当父元素都没有设置font-size时，会一直找到html元素，浏览器会有一个默认的设置：1em=16px，即相当于html的font-size设置为100%
rem相对的参照物就是html的fonti-size，默认也是1em=16px，一般html的font-size设置为62.5%，比较好计算，即1rem=10px，但是浏览器兼容性有点问题，低版本IE不支持，所以如果要兼容IE8等，可以再多写一个px单位来兼容
用于隐藏文本，便于SEO和网页阅读器，0/0 a分别代表font-size、font-height和字体（a拿来充个数），transparent表示透明

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

@media媒体查询的级别很高，所以它的rem不是针对html的font-size，而是始终针对浏览器默认的font-size：1rem=16px，所以在媒体查询里直接使用兼容性更好的em比较好
polyfill解决浏览器兼容性的妮子，针对响应式图片用的最多的是picturefill

<div class="item">
    <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" alt="2015年度报告">
    </picture>
</div>

使用picturefill来抹平picture、dpr等兼容性问题，Picturefill增加了对响应图像解决方案，包括图像元素和新的img元素属性的整个套件的支持。（需要在HTML文档头部引用js库）
* 使用html5shiv让老的浏览器去支持html5的新标签
使用方法：

<!--[if lt IE9]>
<script src=”https://cdn.bootcss.com/html5shiv/r29/html5.js ”></script>
< ![endif]-->

将上代码复制到head部分，记住一定要是head部分（因为IE必须在元素解析前知道这个元素，所以这个js文件不能在其他位置调用，否则失效）
然后在css中加入：

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

实现原理：让这些html5标签成块状和div一样
此外还可以通过JavaScript定制需要支持的html5元素，通过在head中并且在引入html5shiv之前插入以下代码

<!--[if lt IE 9]>
<script>
  window.html5 = {
  'elements': 'abbr article custom elements',
  'shivCSS': true,
  'shivMethods': true
  };
</script>
<script src="html5shiv.min.js"></script>
<![endif]-->

其中elements的属性值是html5元素标签，可以是由空格分隔的字符串或数组；shivCSS的属性类型为Boolean，默认为true，给html5元素添加CSS样式；shivMethods的属性类型为Boolean，默认为true，覆盖createElement和createDocumentFragment方法。

需要用到的语义化元素很少？

那我们就自己来实现html5shiv
head中：

<!--[if lt IE 9]>
  <script>
   ;(function(){
     var elements = ['section','header','footer','article'];
     var i;
     for(i in elements){
       document.createElement(elements[i]);
     }
   })();
  </script>
<![endif]-->

css中：

<style>
  section, header, footer, article {display: block}
</style>

IE6-8不支持媒体查询，可以引入repond库，使其支持min-width和max-width这两个特性
使用方法：引入respond.min.js即可，但是要在css的后面。
实现思路：
1.把head中所有<link rel=“sheetstyle” href=“xx”/>的css路径取出来放入数组
2.然后遍历数组一个个发ajax请求
3.ajax回调后仅分析response中的media query的min-width和max-width语法，分析出viewport变化区间对应相应的css块
4.页面初始化时和window.resize时，根据当前viewport使用相应的css块。
modernizr：用来进行防御性编程，来进行兼容性检测
当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的input标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对HTML5的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。（这样咱们就不需要上面提到的html5shiv了）
此外在Modernizr 2.0版中，它增加了一个针对JavaScript和CSS的条件资源加载器(conditional resource loader)。该资源加载器接受三个参数，第一个是表达式，列举了所需的特性。第二个参数是如果表达式返回true则加载的JavaScript和 CSS文件列表。第三个参数是所需特性不存在的情况下备用的文件列表。除了优雅降级，加载器还可用于引入polyfill。（又可以用到上面的知识）
Modernizr是基于渐进增强理论来开发的，所以它支持并鼓励开发者一层一层的创建他们的网站。一切从一个应用了Javascript的空闲地基开始，一个接一个的添加增强的应用层。因为使用了Modernizr，所以你容易知道浏览器都支持什么。
工作原理：Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
browser-sync：多个设备上进行同步调试
browser-sync start <options> 实例：browser-sync start --server --port 1234
--port 指定要使用的端口
--files 文件路径
--server 运行本地服务器

一天一颗蛋的开心

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一款响应式的网站Demo

本作品原始灵感来源慕课网实战视频，如果大家有需要可以star我的GitHub，里面还有许多实战的源码，之后也会不断更新。接下来记录一些编程当中的重难点 viewport视口对于PC端：视口就是浏览器主窗口的区域对于手机端： layout port布局视口：一个虚拟的视口，一般是960px来把页面先进行渲染 visual port可视视口：一个网页在手机上呈现出来的区域的宽度，用户
复制链接

扫一扫