精华内容
下载资源
问答
  • 关于响应式布局,你必须要知道的

    千次阅读 多人点赞 2019-08-30 09:30:08
    响应式Web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。 二、...

    一、前言

    响应式Web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。想阅读更多优质文章请猛戳GitHub博客

    二、视口

    移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异,电脑端的视口宽度等于分辨率,而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。

    1.为什么手机端视口要设为980px?

    当年乔布斯设想:苹果手机如果在市场上火爆了,但是各个网站还没有来得及制作手机端网页,那么用户不得不用手机访问电脑版的网页,如何用小屏幕访问大屏幕的页面也同样可读呢?乔帮主就想着为手机固定一个视口宽度,让手机的视口宽度等于世界上绝大多数PC网页的版心宽度,就是980px。这样,用手机访问电脑版网页的时候,旁边刚好没有留白。不过页面缩放后文字会变得非常小,用户需要手动放大缩小才能看清楚,体验非常差。
    [外链图片转存失败(img-071srToB-1567128496066)(https://user-gold-cdn.xitu.io/2018/5/23/1638b26cafb80798?w=231&h=405&f=png&s=28074)]

    2.约束视口

    为了解决前面的问题,可以在网页的中添加下面这行代码:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    
    width=device-width   视口为设备宽度(就是人设置的一个宽度)//不设置的话默认为980px
    initial-scale=1.0    初始化的视口大小是1.0倍
    maximum-scale=1.0    最大的倍数是1.0倍
    user-scalable=0      不允许缩放视口
    

    这个视口的标签告诉浏览器怎么渲染网页。在这里,标签想表达的意思是:按照设备的宽度(device-width)来渲染网页内容。事实上,在支持这个标签的设备上给你看一看效果,你就明白了。

    约束视口后

    不错呀!用户体验大大改善!!!
    此时如果用document.documentElement.clientWidth来测试浏览器屏幕宽度,你会发现当前视口宽度等于手机屏幕的宽度,约数后的视口宽度都是在320~480之间(手机竖直使用的时候)。
    这个视口的尺寸,是手机厂商设置的,能够保证我们的文字比如16px,在自己的这个视口下清晰、大小刚刚合适。所以大屏幕的手机的约束视口 > 小屏幕手机的约束视口。这就能够保证我们的网页可以用px写字号、写行高
    需要注意的是:约束之后的视口宽度,不是自己的分辨率!!每个手机的分辨率,都要比自己的视口宽度大得多得多!
    最最重要的一句话:前端开发工程师,丝毫不关心手机的分辨率,我们只关心视口。

    三、图片

    人们常说说“一图胜千言”,确实如此。我们网页中关于松饼的文字介绍再多,也没有图片有吸引力。下面我们就在页面上方添加一张松饼的图片(2000像素宽),效果类似引诱用户往下看的大题图。

    添加图片后

    哇,真是好大一张图,它让整个网页看起来都失衡了,水平方向上图片溢出了。不行,必须解决这个问题。可以用CSS给图片指定固定宽度,但问题是我们想让它能在不同大小的屏幕中自动缩放。比如,我们例子中的iPhone屏幕宽度为320像素,如果我们把图片设置成320像素宽,那么iPhone屏幕旋转后又怎么办呢?这时候320像素变成了480像素。
    解决方案很简单,只要一行CSS代码就可以让图片随容器宽度自动缩放:

    img {
     max-width: 100%;
    } 
    

    回到手机上,刷新页面,结果比较符合预期了。
    这里声明max-width规则,就是要保证所有图片最大显示为其自身的100%(即最大只可以显示为自身那么大)。此时,如果包含图片的元素(比如包含图片的body或div)比图片固有宽度小,图片会缩放占满最大可用空间

    为什么不用width:100%?

    要实现图片的自动缩放,也可以使用更通用的 width 属性,比如width:100%。然而,这条规则在这里并不适用。因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下,图片会被无谓地拉伸。

    四、手机浏览器内核

    在移动端,仅有四个独立的浏览器内核,分别为微软的Trident、火狐的Gecko、开源内核Webkit、Opera的Presto。
    目前微软的Trident在移动终端上主要为WP7、8系统内置浏览器。Opera的Presto内核主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版。Webkit内核的适用范围则较为广泛,Android原生浏览器、苹果的Safari、谷歌Chrome(Android4.0使用)都是基于Webkit开源内核开发的。

    兼容的前缀:
    1	-ms-
    2	-moz-
    3	-o-
    4	-webkit-
    

    中国用户的浏览器市场份额:

    近一年中国用户的浏览器市场份额

    UC、Android内置、Chrome、Safari、QQ Browser都是webkit内核,从图上看占了绝大部分的市场份额。
    所以一定要伺候好-webkit-。 有的公司干脆只兼容-webkit-,别的兼容比如-ms-都不写。

    五、流式布局

    百分比布局也叫作流式布局、弹性盒布局。手机网页没有版心,都左右撑满。
    百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。

    • 如果用百分比写width,那么指的是父元素width的百分之多少。
    • 如果用百分比写height,那么指的是父元素height的百分之多少。
    • 如果用百分比写padding,那么指的是父元素width的百分之多少,无论是水平的padding还是竖直的padding。
    • 如果用百分比写margin,那么指的是父元素width的百分之多少,无论是水平的margin还是竖直的margin。
    • 不能用百分比写border的宽度

    接下来我们看一个例子:

    	div{
    		width:200px;
    		height:300px;
    		padding:10px;
    	}
    	div p{
    		width:50%;
    		height:50%;
    		padding:10%;   
    	}
        此时p的真实宽度是多少?
    

    p的盒模型图

    此时p的真实宽度是140px*190px

    六、媒体查询

    1.为什么响应式 Web 设计需要媒体查询

    CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。如果没有媒体查询,光用CSS是无法大大修改网页外观的。这个模块让我们可以提前编写出适应很多不可预测因素的CSS规则,比如屏幕方向水平或垂直、视口或大或小等等。弹性布局虽然可以让设计适应较多场景,也包括某些尺寸的屏幕,但有时候确实不够用,因为我们还需要对布局进行更细致的调整。媒体查询让这一切成为可能,它就相当于CSS中基本的条件逻辑。

    2.媒体查询语法

    我们在媒体查询外面写的第一条规则,是“基本的”样式,它适用于任何设备。在此基础上,我们再为不同视口、不同能力的设备,渐进增加不同的视觉效果和功能。

    body {
        background-color: grey;
     } 
    @media screen and (min-width:1200px){
        body{
            background-color: pink;
    	}
    }
     @media screen and (min-width:700px) and (max-width:1200px){
        body{
    	background-color: blue;
    	}
    }
    @media screen and (max-width:700px){
        body{
    	background-color: orange;
            }
    }
    

    其中@media就表示媒体查询,查询现在看这个网页的设备是什么,以及它的宽度是多少。screen表示看这个网页的设备是显示器,而不是残疾人听力设备、也不是打印机。后面用and符号罗列所有的可能性。
    值得注意:媒体查询只能包裹选择器,不能包裹k:v对儿。
    IE6、7、8不支持媒体查询,也为了防止手机端的某些浏览器不支持媒体查询,所以不要把所有的选择器都放在媒体查询里面。

    七、rem响应式布局

    rem响应式布局思想

    1. 一般不要给元素设置具体的宽度,但是对于一些小图标可以设定具体宽度值
    2. 高度值可以设置固定值,设计稿有多大,我们就严格写多大
    3. 所有设置的固定值都用REM做单位(首先在HTML中设置一个基准值:PX和REM的对应比例,然后在效果图上获取PX值,布局的时候转化为REM值)
    4. JS获取真实屏幕的宽度,让其除以设计稿的宽度,算出比例,把之前的基准值按照比例进行重新的设定,这样项目就可以在移动端自适应了

    什么是rem,它与em有何区别

    rem:当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的
    em:表示父元素的字号的倍数。(特例:在text-indent属性中,表示文字宽度)

      body             →font-size:20px;
       <div class="box1">   → font-size:2em;
    	box1
    	  <div class="box2">  → font-size:2em;
    		box2
    	    <div class="box3">  → font-size:2em;
    	    	box3
    	    </div>
    	 </div>
      </div>
    

    得到结果

    em为单位的时候,font-size属性是计算后继承,box1计算出来是40px。那么里面的box2、box3继承的都是40px。em单位不仅仅可以用来设置字号,还可以设置任何盒模型的属性,比如width、height、padding、margin、border
    rem有一点优势就是可以和媒体查询配合,实现响应式布局:

    @media screen and (min-width: 320px) {
        html {font-size: 14px;}
    }
    @media screen and (min-width: 360px) {
        html {font-size: 16px;}
    }
    @media screen and (min-width: 400px) {
        html {font-size: 18px;}
    }
    

    运用场景

    如果我们做的H5页面只在移动端访问,这是因为REM不兼容低版本的浏览器。而如果移动端和PC端公用一套代码,建议使用流式布局。

    如何做个REM响应式布局

    1、从UI设计师拿到PSD设计稿,然后在样式中给HTML设定一个font-size的值,我们一般都设置一个方便后面计算的值,例如:100px

    html{
    font-size:100px;//1rem=100px
    }
    

    2、写页面,写样式
    首先按照设计稿的尺寸来写样式,然后在写样式值的时候,需要把得到的像素值除以100计算出对应的REM的值。
    值得注意的是:真实项目中外层盒子的宽度我们一般还是不写固定值,沿用流式布局法的思想,我们用百分比的方式布局

    margin:0  0.2rem
    height:3rem;
    

    3、根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size的值
    例如:设计稿宽度为640px,其中有一个部分是轮播图,它的尺寸是600*300,在样式中给HTML设定一个font-size的值为100px,则轮播图大小应该为 6rem×3rem,那如果手机屏幕宽度为375px,其font-size应该设置为多少。

    375/640*100->fontsize=58.59375//此时轮播图能自适应手机屏幕大小
    

    根据当前屏幕宽度和设计稿宽度的比例,动态计算一下当前宽度下的fontsize值应该是多少,如果fontsize的值改变了,之前设定的所有REM单位的值自动会跟着放大或者缩小。可以通过以下这段代码实现:

    <script>
    ~function(){
    var desW=640,
    winW=document.documentElement.clientwidth,
    ratio=winW/desW;
    document.documentElement.style.fontSize=ratio*100+“px“;
    }();
    </script>
    

    但如果当前屏幕宽度大于设计稿宽度,图片会被拉长而失真,所以以上代码需要稍微做些修改:

    //html部分
    <section id="main">
    <div class="box"></div>
    </section>
    //js部分
    <script>
    ~function(){
    var desW=640,
    winW=document.documentElement.clientwidth,
    ratio=winW/desW;
    var oMain=document.getElementById('main');
    if(winW>desW){
    oMain.style.width=desW+"px";
    oMain.style.margin="0 auto";
    return;
    }
    document.documentElement.style.fontSize=ratio*100+“px“;
    }();
    </script>
    

    欢迎关注公众号:前端工匠,你的成长我们一起见证!

    在这里插入图片描述

    八、参考

    响应式Web设计:HTML5和CSS3实战/(英)本·弗莱恩(Ben Frain)著;奇舞团译

    展开全文
  • 做响应式网站除了媒体查询还有哪些办法呢?求各位大神解答!!!!!!!
  • 浅谈html5 响应式布局

    2021-01-21 14:28:25
     响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端一个特定的版本。  这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端...
  • 响应式布局是什么?

    千次阅读 2018-06-30 20:43:23
      响应式布局就是一个网站能够兼容多个终端——而不是为每个终端一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。   响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。 二、...

    一、什么是响应式布局?

      响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
      响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

    二、响应式布局的优点和缺点有哪些呢?

     (1) 优点 :1. 面对不同分辨率设备灵活性强
               2. 能够快捷解决多设备显示适应问题
     (2) 缺点 :1.不能完全兼容所有浏览器,代码累赘,会出现隐藏无用的元素,加载时间加长
               2. 一定程度上改变了网站原有的布局结构,会出现用户混淆的情况。

    三、实现原理?

      原理:简单点说响应式布局它是通过CSS中Media Query(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。

    四、用示例来实践一下

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>响应式布局</title>
        <style>
        body {
                background-color: #ccc;
            }
            @media screen and (max-width: 1000px) {
                body {
                    background-color: red;
                }
            }
            @media screen and (max-width: 800px) {
                body {
                    background-color:green;
                }
            }
            @media screen and (max-width: 600px) {
                body {
                    background-color: skyblue;
                }
            }
            @media screen and (max-width: 400px) {
                body {
                    background-color: yellow;
                }
            }
        </style>
    </head>
    <body>
        这就是简单的响应式布局示例
    </body>
    </html>

      看完我写的示例,你可以试着敲一下在浏览器里运行,然后缩小浏览器窗口,你就会发现网页的颜色会随着你的浏览器窗口宽度变化而变色,这就是css的媒体查询功能,根据浏览器视口宽度的不同来加载不同的css样式。
      值得注意的是:在手机设备上,我们要禁止用户来缩放屏幕。不禁止的话,可能在显示上会造成错位,以及显示的不是手机网站的样式。所以,我们要通过代码来禁止用户在手机端上缩放屏幕,已达到正常的手机网站效果。
      禁止代码如下:

    <meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

    (注意的是在页面的头部之间加上上面这句。meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。)
    参数设置
        width – viewport的宽度
        height – viewport的高度
        initial-scale – 初始的缩放比例
        minimum-scale – 允许用户缩放到的最小比例
        maximum-scale – 允许用户缩放到的最大比例
        user-scalable – 用户是否可以手动缩放

    五、注意事项

      响应式布局一定要注意以下两点:

        一 是图片,在移动设备上,要做一些特定适合的小图片来匹配,如果单纯使用压缩的图片会失真,影响用户体验;
        二 是在头部加入如下代码,目的是声明在移动设备上设置原始大小显示和是否缩放

     <meta name=“viewport” content=“width=device-width; initial-scale=1.0”>

      最后说一下通过媒体查询来加载不同的css,这是响应式布局的核心,媒体查询的方法当然也有很多,如果有兴趣深入了解,大家也可以自行百度一下。
       (如果想了解更多,可以通过这个网址
    https://www.jianshu.com/u/d3ec90080c96去简书上看看更多关于前端的文章)

    展开全文
  • 响应式及断点设置分析

    千次阅读 2018-10-25 09:18:03
    为什么要做响应式? 怎么入门响应式,是不是很难? 分辨率那么多,响应式断点怎么设置? 所以本文简单说下下手响应式的一些基础,包你入门响应式,没学会的话再手把手教。 为什么要学响应式 这个问题呢就跟女神有...

    首先,本文是普通入门知识篇,主要说的是断点的设置。
    很多想接触响应式的同学都会有以下疑惑:

    标题为什么要做响应式?

    怎么入门响应式,是不是很难?
    分辨率那么多,响应式断点怎么设置?

    标题为什么要学响应式

    这个问题呢就跟女神有多面一样,比喻在家是睡衣,上班是职业装,团建参加活动什么的就是休闲运动装了。网页呢,对于pc,平板,手机当然也得有不同的打扮排版才吸引用户,提升体验。

    不然如中国移动手机端的表现是这样的(整个大小被等比例缩放到适应移动端的device-width),根本没法提用户体验:

    中国移动端表现
    当然还有个更俗的原因就是你要全方位无死角伺候好你的各种平台的用户,让他们用得爽,然后你每个月才有白花花的银子。

    响应式是什么

    简单来说,响应式就是在不同的分辨率下,都要让内容以最佳的展现形式呈现给你用户,提升用户体验。如下图:

    响应式布局图示

    具体的响应式站点欣赏可参看:media queries

    如何下手响应式

    第一步:设置viewport

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

    至于为什么要设置这个,答案请移步移动前端开发之viewport的深入理解(人家解释的比我好,在这就不啰嗦了)

    第二步:设置断点
    断点也就是我们说的media queries。

    在说断点之前,我们先说下移动的10086服务,一般都会有服务选择,如按1是话费相关的服务,按2是流量相关的服务,按3是业务办理方面的服务…然后按0是人工服务。

    明白了移动的10086服务,我们现在提出设置响应式断点的两大原则:

    先规划好几个重要断点如pc,平板,手机(相当于1,2,3…具体的业务)
    遇到特殊情况再添加具体的断点(相当于0键的人工服务)
    下面我们来规划下重要的断点,在此之前,先看下bootstrap 4的断点设置:

    // 默认为手机端样式
    
    // 等于或大于 34*16 = 544px(手机横屏)
    @media (min-width: 34em) { ... }
    
    // 等于或大于 48*16 = 768px(平板竖屏)
    @media (min-width: 48em) { ... }
    
    // 等于或大于  62*16 = 992px(pc窄屏)
    @media (min-width: 62em) { ... }
    
    // 等于或大于 75*16 = 1200px( pc宽屏)
    @media (min-width: 75em) { ... }
    

    这里再补充一个超大屏断点,一般用于图片居多的站点如视频,购物类站点(单位为em或px都是一样的)

    // pc超大屏 1380px

    @media (min-width: 1380px) { ... }
    

    我们把以上的断点写个简单的demo感受下:响应式断点设置demo

    从以上得出一般要考虑的几个关键断点分别为:手机横屏,平板竖屏,pc窄屏,pc宽屏,pc超大屏(比较适合购物商城,视频类站点),再加上默认的手机样式就构成了全方位海陆空覆盖,正好对应上我们设置断点的第一条规则,主要平台都涉及了。

    这里我们提出三个问题:

    1. 为什么是min-width,max-width可以不?
    2. 为什么是这些数字,而不是别的数字?
    3. 为什么用min-width?

    这里先说min-width和max-width的区别:min-width表示屏幕最小宽度为多少,也即等于或大于该值,如min-width:768px则表示屏幕要等于或大于768px才会应用该样式,同理max-width表示最大宽度为多少,也即小于或等于该值。

    在做响应式的时候我们一般有个原则叫做是移动优先还是pc优先,bootstrap采用的是移动优先,移动优先的特点是先考虑设计移动的样式,然后再设置断点一步步向大尺寸添砖加瓦增加样式,所以采用min-width(移动端的样式相对来说都比较简单,而pc相对来说要复杂点,所以这种顺序是样式由少到多,由简单到复杂的过程)。反过来如果你的业务是pc优先,那默认是pc的样式,兼容到移动的时候就是由大到小,所以采用max-width(这种方式后面的移动端需要重置覆盖默认pc上的很多样式,比较浪费)

    为什么是这些数字?

    至于断点数字为什么是这些数字呢?这里的数字大概有三种,一种是范围的代表如544px,一种是分辨率的代表如768px,一种就是我们布局主体内容的实际宽度如992px和1200px。为什么是这三种数字其实跟内容在各个平台的表现有关。对于pc端,我们一般设置主体内容固定宽度居中,所以就以此作为断点;而平板竖屏因为宽度比较窄,所以都会全部占满空间,所以768px就代表了这个宽度;而544px其实我也不知道到底是某个平板的宽度(这个平板很小)还是某个手机的横屏宽度,所以我觉得应该是一个范围,用来界定手机和平板的界限,在这以下都是手机端。(这个问题有知道的请告诉我下,查了很多资料都没找到)

    现在看起来一下明白了,那么我们是否可以直接拷贝过来使用就可以呢?

    怎么使用这些断点?

    使用的第一步复制,这个都问题,但是根本不能体现我们业务的特色。所以到底怎么制定断点,还有待我们进一步讨论,再来两个问题:

    我们的站点要兼容到哪些平台?
    用户浏览器分辨率怎么分布?

    首先说下第一个问题,大概有五种情况:

    第一种只面向pc;第二种pc+平板;第三种平板+手机;第四种只有手机;第五种全兼容如个人博客。

    一般内容较小的站点如小公司网站及个人博客可以采用全兼容响应,因为制作成本相对来说比较低,如imweb就是同一内容兼容所有平台;而一些内容非常多,站点比较复杂的则可以采用pc+平板一套内容,手机单独一套内容,如携程。

    全兼容模式一般内容体为流式,可以采用刚才的bootstrap关键断点,再额外增加一些局部断点美化页面以提升体验;而pc+平板的其实也比较简单,设置窄屏,宽屏,超大屏即可;最后对于只针对手机的则直接不设置断点(如果你不想在大屏访问的时候全屏可以给外围容器设置一个max-width并居中),但得保证320px/375px/360px下都访问正常,这就要求对整行容器或者里面的部分内容进行流式布局,当然在一些特定的情况也需要额外补充些断点。(额外增加的断点,都相当于10086的人工服务,特殊情况下使用)

    现在进入我们第二个问题,用户浏览器分辨率分步:

    做响应式就是为了优化我们用户的体验,如果用户的浏览器都在1200px以下,你去做个1380px的超大屏就没有意思了。所以根据我们用户的浏览器分辨率特点制定具体的更有意义的断点尤其重要,省得做些费时费力又没有意义的事。如下图一个站点的pc分辨率占比情况(不包括手机上的数据):

    屏幕分辨率占比

    可以看到1024px占比7%,1200px以上的占了84%(100%-7%-9%),1380px以上占比46%。假设这个站点是商城购物类型的,那么1380px,1200px的断点比1024的断点更重要。

    最后:断点的设置跟站点的内容,用户设备的分辨率,用户规模和成本计算都息息相关,所以这些都应该考虑进去,而不是盲目的抄来就用。

    展开全文
  • 响应式开发原理

    千次阅读 2018-06-19 22:59:50
    就是在不同终端设备上和任何尺寸的屏幕上也可以展示完美的设计响应式网站的概念:flexible grid layout 弹性网格布局flexible image 弹性图片media queries 媒体查询响应式网站的优点:减少工作量 网站、设计...

    什么是响应式网站?

    就是在不同终端设备上和任何尺寸的屏幕上也可以展示完美的设计

    响应式网站的概念:

    • flexible   grid   layout    弹性网格布局
    • flexible   image    弹性图片
    • media queries   媒体查询

    响应式网站的优点:

    • 减少工作量

    1.  网站、设计、代码、内容都 只需要一份
    2. 多出来的工作量只是JS脚本、CSS样式做一些改变              

    •    节省时间
    • 每个设备都能得到正确的设计
    • 搜索优化

    响应式网站的缺点:

    • 会加载更多的样式和脚本资源
    • 设计比较难精确定位和控制
    • 老版本浏览器兼容不好

    媒体查询:

    @media all and (min-width:800px) and (orientation:landscape){
    ...
    }

        and-----与-------全部匹配

        or-------或-------任意条件匹配

        not------非    

    CSS3媒体查询属性简介:

    • width:视口宽度
    • height:视口高度
    • device-width:渲染表面的宽度,就是设备屏幕的宽度
    • device-height:渲染表面的高度,就是设备屏幕的高度
    • orientation:检查设备处于横向还是纵向
    • aspect-ratio:基于视口宽度和高度的宽高比        width/height  如:16/9,4/3

    • device-aspect-ratio:渲染表面的宽度,就是设备屏幕的宽度
    • color:每种颜色的位数bits    如:min-color:16位,8位
    • resolution:检测屏幕或打印机的分辨率    如:min-resolution

    以上属性都可以添加min-max-前缀

    viewport视口:

    • 布局视口(layout viewport)    宽度不变的
    • 可视视口(visual viewport)    显示布局视口的不同内容
    • 理想视口(ideal viewport)    理想视口就是布局视口在一个设备上的最佳尺寸

    理想视口就是为构建手机浏览器优化的页面而添加

    <meta name="viewport" content="width=device-width/>"	

    百度的设置

    <meta name="viewport" content="width=device-width,
    minimum-scale=1.0,		//最小的缩放比例
    maximum-scale=1.0,		//最大的缩放比例
    user-scalable=no/>"	
    怎样分析设计图:

    分析结构:实现部分区域的复用

    如何组织项目目录结构

    • 约定优于配置(convention    over    configuration)
    • 约定代码结构或命名规范来减少配置数量
    • css/*.css
    • jquery.js ->jquery.min.js

    没有最好的组织方式,只有合适的组织方式

    这是我的项目目录:


    使用markdown:

    • 标题:# 空一格+标题内容(一般有六级标题,二级标题加两个##,以此类推)
    • 无序列表:* 空一格+名称;    有序列表:1. 空一格+名称
    • 引用一段名言> 空一格 +引用的名言
    • 链接:[百度](http://www.baidu.com)
    • 加入图片:![百度](http://www.baidu.com)
    • 粗体:用两个**前后包裹住    斜体:用一个*前后包裹住    粗体加斜体:用三个***包裹
    • 表格:   
    |Col1|Col2|Col3|      //第一行
    |---|---|---|         //对齐方式     
    |aaa|111|222|         //内容
    |bbb|222|333|         //内容
            对齐方式:|:---|:---|:---|    左对齐        |---|:---:|---|    居中       |---:|---:|---:| 

            必须写对齐方式

    • 代码:`在代码前后包裹,显示一行的代码;    多行的代码:用三个```包裹

    开始编写HTML代码

    检测IE版本,版本过低则提醒更新

    <!doctype html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>理财网站</title>
    </head>
    <body>
    <!--[if ht/lt/gte >=/lte <= IE8]-->
    <p class="browserupgrade">
        你的浏览器版过低,请到<a href="http://browsehappy.com/">这里
        </a>更新,以获得最佳的体验
    </p>
    <!--[endif]-->
    
    </body>
    </html>
    header部分以及H5新增标签简介

    • header    头部    footer    底部
    • nav    导航栏
    • article    是一个特殊section,独立的有内容的区块
    • section    标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分
    • b    加粗,吸引人注意
    • em    重点强调
    • i    定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。

    命名规则:

    一般都使用class定义样式,id一般用于js快速的区别和获取元素class,一般都用中横线分隔,id一般都使用驼峰命名法

    项目的HTML结构(也可以在我的github看到:点击进入

    <!doctype html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>理财网站</title>
    </head>
    <body>
    <!--[if ht/lt/gte >=/lte <= IE8]-->
    <p class="browserupgrade">你的浏览器版过低,请到<a href="http://browsehappy.com/">这里
        </a>更新,以获得最佳的体验</p>
    <!--[endif]-->
    
    <header>
        <nav class="top">
            <span class="tel">理财热线:400-688-888</span>
            <ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">快速注册</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">帮助</a></li>
                <li><a href="#">APP下载</a></li>
            </ul>
        </nav>
        <nav class="main">
            <a href="#" class="brand"><img src="img/logo@1x.png" alt="回到首页"></a>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">理财频道</a></li>
                <li><a href="#">投资频道</a></li>
                <li><a href="#">新手专区</a></li>
                <li><a href="#">安全保障</a></li>
            </ul>
        </nav>
    </header>
    
    <div class="container">
        <div class="transaction">
            <div class="trans-content">
                <div class="trans-data">
                    <span>平台累计成交金额</span>
                    <span class="trans-money">19888</span>
                    <span>万元</span>
                </div>
                <div class="trans-data">
                    <span>过去7日成交金额</span>
                    <span class="trans-money">1888</span>
                    <span>万元</span>
                </div>
                <div class="trans-report">
                    <a href="#">查看平台运营报告</a>
                </div>
            </div>
        </div>
    
        <div class="ad">
            <div class="item">
                <img src="img/ad001.png" alt="">
            </div>
            <div class="item">
                <img src="img/ad002.png" alt="">
            </div>
            <div class="item">
                <img src="img/ad003.png" alt="">
            </div>
        </div>
    
        <section class="feature">
            <div class="item">
                <h3>安全</h3>
                <p>国家AAA信用平台 <br>银行资金托管 <br>上市公司背景保证</p>
            </div>
            <div class="item">
                <h3>权威</h3>
                <p>中央电视台推荐 <br>互联网百强企业 <br>标准起草单位</p>
            </div>
            <div class="item">
                <h3>省心</h3>
                <p>100元旗头 <br>用户利益保障机制 <br>保险公司承保</p>
            </div>
        </section>
    
        <div class="notice">
            <a href="#">
                <span>201-6-31</span>
                元旦期间业务受理及值班元旦期间业务受理及值班元旦期间业务受理及值班元旦期间业务受理及值班
            </a>
            <a href="#" class="more">更多公告</a>
        </div>
    
        <section class="product">
            <h2>
                固定期限产品
                <em>甄选优质基金</em>
                <em>省时省力</em>
                <em>坐等收益</em>
            </h2>
    
            <div class="product-content">
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益:<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额:<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益:<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额:<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益:<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额:<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益:<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额:<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益:<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额:<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
        </section>
    
        <section class="product">
    
            <h2>
                固定期限产品
                <em>甄选优质基金</em>
                <em>省时省力</em>
                <em>坐等收益</em>
            </h2>
    
            <div class="product-content">
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益:<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额:<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益:<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额:<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益:<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额:<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益:<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额:<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益:<span class="year-rate">3.5% <i>起</i></span></p>
                        <p>总成交金额:<span class="money">1888<i>万元</i></span></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
    
        </section>
    
        <section class="footer">
            <div class="footer-content">
                <p class="brand"></p>
                <ul>
                    <li class="title">关于我们</li>
                    <li><a href="#">公司介绍</a></li>
                    <li><a href="#">业务模式</a></li>
                    <li><a href="#">合作结构</a></li>
                    <li><a href="#">服务协议</a></li>
                </ul>
                <ul>
                    <li class="title">风险防范</li>
                    <li><a href="#">账户安全</a></li>
                    <li><a href="#">安全保障</a></li>
                </ul>
                <ul>
                    <li class="title">理财产品</li>
                    <li><a href="#">固定期限</a></li>
                    <li><a href="#">债权/散标</a></li>
                </ul>
                <ul>
                    <li class="title">交易帮助</li>
                    <li><a href="#">购买</a></li>
                    <li><a href="#">赎回</a></li>
                    <li><a href="#">提现</a></li>
                </ul>
                <ul>
                    <li class="title">机构服务</li>
                    <li><a href="#">机构中心</a></li>
                    <li><a href="#">合作联系</a></li>
                </ul>
            </div>
        </section>
    </div>
    
    <footer>
        <ul>
            <li><span class="icon icon-zfywxk">支付业务许可证</span></li>
            <li><span class="icon icon-pcirk">PCI认证</span></li>
            <li><span class="icon icon-visayz">Visa 验证</span></li>
            <li><span class="icon icon-vsjmfw">VerSign加密服务</span></li>
            <li><span class="icon icon-wlgs">网络工商</span></li>
            <li><span class="icon icon-rzcx">电子商务协会认证诚信网</span></li>
            <li><span class="icon icon-gs">北京工商</span></li>
        </ul>
        <p>北京某互联网金融公司 版权所有 @ 2017-2018 </p>
    </footer>
    
    </body>
    </html>

    实现PC端样式

    • 使用Normalize.csss作为项目的初始css样式代码:点击获取(消除浏览器之间的差异)

    px、em、rem的区别

    • px相对于屏幕分辨率的一个单位1px相当于1个像素 ,固定的单位
    • em相对的长度单位;                       

    1. em相对参照物为父元素的font-size,
    2. em具有继承的特点,如果父元素没有设置font-size就向上找
    3. 当没有设置font-size时,浏览器会有一个默认的em设置:1em = 16px
    4. em的缺点:容易错乱
    • rem的相对参照物为根元素html,相对于参照固定不变,所以比较好计算,当没有设置font-size时,浏览器会有一个默认的rem设置:1rem = 16px,这点与em一致的

            font-size:  62.5%    1rem = 10px  (10/16*100%)

            font-size:  100%    1rem = 16px

    清除浮动(目前最好的两种方法):

    .clearfix:after{
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        zoom: 1;
    }
    .clearfix:after,
    .clearfix:before {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }

    实现移动端样式

    使用媒体查询实现

    • 设置断点:以常用的断点设置,不要为专门的设备设置断点,主要要以设计图为主
    • 断点区间设置不同的padding...之类的样式

    CSS选择器:

    • E > F    ul > li 就是选ul下的子类li,不是子孙的li
    • E + F    ul li + li 就是选ul下除了第一个的li外的所有li
    • E ~F     

    <ul>
            <li></li>
            <li></li>
            <a href=""></a>
            <a href=""></a>
            <li></li>
        </ul>

        ul li ~li就是选到除第一个li外的所有li(注意和第二种的差别)


    属性选择器:

    • E[attr]    有attr这个属性就可以
    • E[attr = "value"]    有attr这个属性,还要完全等于value这个值
    • E[attr^ = "value"]    有attr这个属性,以value开头,如:a[href^="http://"]
    • E[attr$ = "value"]    有attr这个属性,以value结尾,如:img[src$=".png"]
    • E[attr* = "value"]    有attr这个属性,包含value就可以了
    • E[attr~ = "value"]    有attr这个属性,以空格分开的词汇都可以模糊的选择到
    • E[attr|= "value"]    有attr这个属性,以value开头或者有value-开头的值

    打印样式设置,在main.css最后面添加下面的代码即可:

    @media print {
        *,
        *:before,
        *:after{
            background: transparent !important;
            color: #000 !important;
            box-shadow: none!important;
            text-shadow: none!important;
        }
    
        a,
        a:visited {
            text-decoration: underline;
        }
    
        a[href]:after {
            content: "(" attr(href)")";
        }
    
        abbr[title]:after {
            content: "(" attr(title)")";
        }
    
        /*
        *   使用#和JavaScript的超链接不打印href
        */
        a[href^="#"]:after,
        a[href^="javascript"]:after {
            content: "";
        }
    
        pre,
        blockquote {
            border: 1px solid #999999;
            /* page-break-inside只有opera浏览器起作用,避免在元素内部插入分页符*/
            page-break-inside: avoid;
        }
    
        thead {
            display: table-header-group;
        }
    
        tr,
        img{
            page-break-inside: avoid;
        }
    
        img {
            max-width: 100%!important;
        }
    
        p,
        h2,
        h3 {
            /* 这两个属性的作用,当标题和文字底部发生分页时,保证标题和内容不会分开 */
            orphans: 3;
            widows: 3;
        }
    
        h2,
        h3 {
            page-break-after: avoid;
        }
    }

    如何实现响应式广告和响应式图片

    一个好的广告滚动组件支持:

    • 支持不同的图片数量
    • 支持响应式布局
    • 具有良好的兼容性

    怎么样来挑选第三方组件:

    • 使用人数
    • 是否开源
    • 文档是否齐全
    • 活跃性
    • 小乔够用的组件(轻量级)

    这里选用的是Owl Carousel 2,链接:点击打开链接

    响应式图片:

    • js或者服务端实现(服务端实现:通过把屏幕或者设备信息写入cookie,在获取图片的时候,由服务端决定返回那种图片)
    • srcset    img标签中的一个属性,
    <div class="content">
        <img class="image" src="img/480.png"
            srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w">
    </div>
        由浏览器自己来选择图片,当加载了大图片时,缩小浏览器,图片不会变,浏览器认为图片已经加载在html中了
    • srcset配合sizes
    <div class="content">
        <img class="image" src="img/480.png"
            srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
            sizes="(min-width:800px) calc(100vw - 30em), 100vw">
    </div>
    • picture
    <div class="content">
        <picture>
            <source media="(min-width:36em)"
                    srcset="img/tiananmen-s.jpg 768w"/>
            <source media="(min-width:36em)"
                    srcset="img/tiananmen.jpg 1600w"/>
            <source type="image/svg+xml" srcset="logo.svg 480w, logo.svg 800w,logo.svg 1600w"/>
            <source type="image/webp" srcset="logo.webp 480w, logo-m.webp 800w,log-lo.webp 1600w"/>
    
            <img class="image" src="img/tiananmen.jpg" alt="">
        </picture>
    </div>

    可以设置多个source来进行响应式图片的设计,还可以设置宽屏、横屏下的图片显示不同;也可以支持webp图片

    webp是谷歌开发出来的图片,更小

    • svg

        矢量图形,无论浏览器怎么缩放,图片都不会失真

    这里有两个在线绘制的网站:IcoMoon    http://editor.method.ac/

    这里项目的响应式图片处理:

    这里使用picture,需要使用一个库:picturefill 来处理picture的兼容性

    对svg的图片进行压缩:iconizr

    对png的图片进行压缩:tinypng

    可以在我的github上查看这个项目:responsive-project,如果想自己看视频学习,可以加我百度云(任性的_我),免费赠送学习视频

    Node.js简介

    Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js使用了一个事件驱动,非阻塞式 I/O的模型,使其轻量又高效。Node.sj的包管理器npm,是全球最大的开源库生态系统。

    npm的使用:

    • npm install +包名,如:npm install jquery(在国内最好使用cnpm,在我的这篇博客上写了具体的安装方法 npm与调试工具的安装
    • cnpm init     创建package.json(这里使用的cnpm是npm的镜像,使下载更快)

     其中package.json下有两个依赖:

    "dependencies": {},
    "devDependencies": {},
    • "dependencies"是用于配置生产环境
    • "devDependencies"是用于配置开发环境
    "dependencies": {
        "jquery": "^3.3.1"
      },

    •  "jquery": "^3.3.1"    前面写包名,后面写包的版本
    • ^是使版本号在大于等于3.3.1的版本号都可以,注意大版本号需要相同;如:3.4.* , 3.5.*

    使用node.js下的http-server服务,就可以在网站上通过相应的端口号进行访问,不在是只在本地才可以访问(http-server 网站:点击打开

    • 安装:cnpm install http-server -g

    处理兼容性以及在多个设备上进行调试

    PC端如何处理兼容性:

    • 在主要的浏览器上都要进行测试,如:谷歌、火狐、欧朋、IE等浏览器上进行测试
    • 下载IETester进行IE的测试

    移动端处理兼容性:

    • Genymotion来进行安卓虚拟机的测试   genymotion
    • hack的兼容性问题 ,使用这个网站:browserhacks
    • 解决IE低版本不支持h5新标签的问题,使用这个方法:html5shiv
    • 解决IE低版本不支持css3条件查询的问题,使用这个:Respond
    • 主动的测试:modernizr (防御性编程),可以检测新特性在不同浏览器的兼容性。
    • 也可以在这个网站查属性的兼容性:can i use

    在多个设备上进行调试:

    打包发布

    • 在发布之前还可以做代码优化:

    1.  压缩
    2. 合并
    3. 增加版本号           

        压缩可以使用手动的方法,直接把代码拷到这个网站:javascript-minifier

    • 主流的3个工具

    1. Grunt    (自动化构建工具)
    2. Gulp    (自动化构建工具)
    3. Webpack    (静态资源打包工具)

        Gulp中文文档:gulp中文文档

        安装gulp:

    cnpm install gulp -g
    cnpm install gulp --save-dev

        安装gulp所需的插件:

    cnpm install gulp-dev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

        这些插件的作用:

    • gulp-dev     添加版本号,给每个文件计算一个哈希码,当文件发生改变时,哈希码也会发生改变
    • gulp-rev-replace    当文件名改变了,把文件的引用也修改为新的文件名
    • gulp-useref     通过注释来告诉gulp把哪些文件进行一些合并,怎么的方式合并,合并之后文件的命名(网站:gulp-useref
    • gulp-filter    把文件做一些压缩,然后又把文件放回去
    • gulp-uglify      压缩js的插件
    • gulp-csso     压缩css的插件

        代码如下:

    var gulp = require("gulp");
    var rev = require("gulp-dev");
    var revReplace = require("gulp-rev-replace");
    var useref = require("gulp-useref");
    var filter = require("gulp-filter");
    var uglify = require("gulp-uglify");
    var csso = require("gulp-csso");
    
    
    gulp.task('default', function () {
        var jsFilter = filter('**.*.js', {restore: true});
        var cssFilter = filter('**.*.css', {restore: true});
        var indexHtmlFilter = filter(['**.*', '!**/index.html'], {restore: true});
    
        //每一个pipe就相当于过滤器一样
        return gulp.src('src/index.html')
            .pipe(useref())
            .pipe(jsFilter)
            .pipe(uglify())
            .pipe(jsFilter.restore)
            .pipe(cssFilter)
            .pipe(csso())
            .pipe(cssFilter.restore)
            .pipe(indexHtmlFilter)
            .pipe(rev())
            .pipe(indexHtmlFilter.restore)
            .pipe(revReplace())
            .pipe(gulp.dest('dist'));
    });

        执行后的结果:


        就把所有需要打包的文件处理好了

        使用/*! */注释来注释就不会被打包掉(版本号之类的)

        还有一些有趣的插件:

    • gulp-watch:监听文件的变化自动给我们打包 ;网址:gulp-watch
    • gulp-postcss:通过多个插件来管理CSS,但只解析CSS一次。网址:gulp-postcss
    • gulp-concat :把所有的js文件合并成all.js文件。 网址:gulp-concat
    • gulp-responsive:可以把一个大图片直接生成一定规则的响应式图片。    网址:gulp-responsive

    补充--1选择一个趁手的IDE

        Webstorm:

    • 快速查找
    • 代码补全
    • 版本控制
    • 本地历史
    • 即时模板
    • 光标
    • 代码格式化

    对于文件的模板可以进行自定义设置(File ->setting ->file and Code Templates)

    查看本地历史,可以看我们修改的记录(在文件中右键-> Local History ->Show History)

    代码格式化(Code ->Reformat Code )

    快捷键设置(File -> Keymap-右栏)

    Webstorm进阶操作:


    Emmet:(文档地址:Emmet

    • 嵌套 (> , + , ^ , * , ()) 
    • 属性 (# .  , [] , $ , {}
    • 创作没有意义的文字    ( lorem )

        注意事项:一定要把光标定义到快速创建的代码最后面(如 ul>li>a,就要把光标放在a的后面);快速创建的代码中不要有空格

    展开全文
  • Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。...响应式设计风格,符合现代web网页开发趋势; 响应式图像: 通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对...
  • 常见的响应式布局解决方法

    千次阅读 2018-07-03 09:34:22
    由于设备的分辨率不同,我们就用响应式布局来解决设备分辨率不同的问题,常见的解决方法有px视口、媒体查询、百分比、rem、和vw/vh等方法来实现响应式布局。接下来介绍下个种方法。一、px和视口在静态网页中,我们...
  • 什么是响应式Web设计?怎样进行?

    千次阅读 2016-07-26 12:27:40
    开 始第一篇。老规矩,先无聊的谈论天气一类的话题。十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得...准备在近期的几篇里集中翻译学习一下“响应式Web设计”的相关话题,包括概念、实践方式、案例及...
  • 响应式布局详解(优缺点)

    千次阅读 2018-08-03 11:09:45
     响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。  响应式布局可以为不同...
  • 15个最好的HTML5前端响应式框架(2014)

    千次阅读 2014-10-06 18:56:18
    skelJS是一个轻量极的前端框架,可以创建响应式网站和应用。 只需要引用一个不到20Kb的JS文件,然后就可以调用强大的组件。 Gumby Gumby 2 是基于Sass创建的. 因为你可以使用它快速定制你所需要...
  • 响应式(自适应屏幕)

    千次阅读 2019-12-02 16:40:51
    这样固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。 于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应...
  • Java面试题大全(2020版)

    万次阅读 多人点赞 2019-11-26 11:59:06
    需要注意Jdk 1.8中对HashMap的实现了优化,当链表中的节点数据超过八个之后,该链表会转为红黑树来提高查询效率,从原来的O(n)到O(logn) 24. 说一下 HashSet 的实现原理? HashSet底层由HashMap实现 HashSet的值存放...
  • 根据你的产品特点,进行两种不同的设计, 根据你的设计需求,选择...事实上,你可以认为如果一种设计不能兼顾两种平台的主要差别,就不能算是合格的响应式设计。但是,如果确实想要处理好平台间的所有差异,我们...
  • 响应式布局

    千次阅读 2015-03-20 10:01:37
    相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应...
  • 说起H5响应式网站,很多人第一时间的反应是:“HTML5网站拥有丰富的展示形式”、“H5网站的功能很多”、“响应式网站能够适应不同屏幕大小分辨率的设备”、“H5响应式网站更易于优化”等等的一些观点。没错,html的...
  • 小甲鱼零基础入门学习python笔记

    万次阅读 多人点赞 2019-08-14 11:06:30
    • 语法和结构通常比较简单 • 学习和使用通常比较简单 • 通常以容易修改程序的“解释”作为运行方式,而不需要“编译” • 程序的开发产能优于运行性能 一个脚本可以使得本来要键盘进行的相互操作自动化。...
  • 使用bootstrap响应式需注意的9个问题

    千次阅读 2017-03-23 14:00:55
    响应式网页设计目前是很受欢迎的布局方式,在操作上和对用户友好体验度上来说绝对是我们的首选,自适应的响应越来越少,在处理兼容,效率上往往都比较麻烦,那作为web前端的我们接下来看一看在引入bootstrap响应式要注意...
  • html css 响应式布局

    千次阅读 2015-06-17 13:34:11
    讲到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。...
  • 响应式设计介绍

    千次阅读 2014-01-16 15:11:49
    2013年,智能机上网时间已经超过PC机了,并且这种趋势是不可逆的,设计移动设备将成为Web...还有一种方案就是响应式设计,好处是一套代码打天下,维护相对来说方便多了,成本较低,开发速度较快,适合大部分的情况。
  • 前端面试题(持续更新中)

    万次阅读 多人点赞 2019-11-06 17:16:33
    960/1920乘以100=50 这里需要判断下,当屏幕的宽度大于设计稿定义的宽度,设计稿的宽度,如果小于,屏幕宽度作为变量屏幕宽度。 10、关于绝对定位,相对定位和固定定位 1、相对定位不脱离标准流,在页面中占位置...
  • 响应式布局设计

    2015-01-07 10:14:59
    这篇文章算是个笔记吧,讨论下什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计。 一、什么是响应式布局 这段文字是摘抄过来的哦。 响应式布局是Ethan Marcotte在2010年5月
  • 前端面试题

    万次阅读 多人点赞 2019-08-08 11:49:01
    的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 21 Quirks模式是什么?它和Standards模式有什么区别 21 div+css的布局较...
  • 在前面的章节中我们已经学习了Vue.js的基础内容并且了解了Vue.js的源码实现,包括:Vue的生命周期、Vue的数据响应、Vue的渲染流程等等,在这一章节我们会和大家一起去实现一个响应式的框架 – MVue,MVue 会遵循Vue...
  • 前端面试锦集

    千次阅读 多人点赞 2019-07-20 13:41:45
    响应式布局怎么实现 (1) 原生代码实现:@media screen可以查询当前浏览器的尺寸,因此可采用该方法对同一个页面设置不同的CSS样式,来满足不同分辨率要求。 (2) 采用bootstrap框架布局 css实现水平垂直...
  •  块级元素水平垂直居中的方法有哪些(三个方法) 让div等块级元素水平和垂直都居中,即永远处于屏幕的正中央,当我们如登录块时非常有用! 实现一、原理:要让div等块级元素水平和垂直居中,必需知道该div等块级...
  • js面试题

    千次阅读 多人点赞 2019-04-09 19:42:32
    尽量避免 table 布局(table 元素一旦触发回流就会导致 table 里所有的其它元素回流) 避免使用 css 表达式(expression),因为每次调用都会重新计算值(包括加载页面) 尽量使用 css 属性简写,如: border ...
  • 测试开发笔记

    万次阅读 多人点赞 2019-11-14 17:11:58
    ★软件测试的目的、意义:(怎么好软件测试) 7 3.软件生命周期: 7 第二章 测试过程 8 1.测试模型 8 H模型: 8 V模型 9 2.内部测试 10 3外部测试: 10 验收测试:(在系统测试之后) 11 回归测试: 11 4.测试过程...
  • 响应式网页开发注意事项

    千次阅读 2016-10-18 20:02:39
    响应式网站开发的一些注意事项。。。
  • 响应式Web设计读书笔记与实践

    千次阅读 2016-02-26 11:24:37
    前段时间在微博上看到了几个在当今前端圈中的大牛的撕逼大战,作为一个前端小白来说就只是看热闹的,热闹中看到了两本书,《无懈可击的Web设计》和《响应式Web设计》,前者没有买到纸质版,后者刚好在快要缺货的时候...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,288
精华内容 14,915
关键字:

哪些网站是用响应式做的