精华内容
下载资源
问答
  • 1.js设置html根节点的字体大小; window宽度/每行多少个字 2、rem是参照html节点的 <html> <head> <title></title> <meta charset="utf8"> <script type="text/javascript" src...

    原理:利用rem和js:

    1.js设置html根节点的字体大小;

    window宽度/每行多少个字
    2、rem是参照html节点的

    <html>
    <head>
        <title></title>
        <meta charset="utf8">
        <script type="text/javascript" src="jquery.min.js"></script>
    </head>
    <body>
        <p>浏览器中用户都是可以自定义默认的文字大小的,如果使用 px,用户自行在浏览器设置中改变了文字大小后,网页上是不会变化的。我们不能排除视障用户(如近视)、老年用户不会这么做,作为一个具有「人文关怀」的 前端,我们完全可以考虑这些情况。由其是在引入了 CSS预处理工具之后,这几乎不会增加什么成本。
        也再次印证前面提到的:响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。</p>
        <p>window宽度/每行多少个字</p>
    
    </body>
    </html>
    
    
    p{
                font-size: 2rem;
            }
    
    $(function(){
            
            fontSize();
            $(window).resize(fontSize)
            
    })
    
    
    function fontSize(){
            var h = $(window).width()/100;
            console.log(h);
            $("html").css("font-size",h+"px");
    }
    
    展开全文
  • 响应式布局总结

    2020-10-09 10:51:04
    1. 响应式布局 && 自适应布局 1.1 响应式布局 1.2 自适应布局 2. 响应式布局的实现 2.1 媒体查询 2.2 百分比布局 2.3 rem布局 2.4 视口 3. 响应式布局中的问题 3.1 图片的响应式 3.2 响应式布局的要点 3.3 盒子模型...


    前言:

    之前就想整理一下响应式布局的知识,一直没整理。之前面试问到了,只说了一个媒体查询。今天就来整理一下响应式布局的知识。

    准备:布局单位

    在说响应式布局之前,我们先来看一下,在网页布局中的布局单位。常用的布局单位包括像素(px),百分比(%),emremvw/vh

    (1)像素是页面布局汇总的基础,一个像素表示终端(电脑、手机、平板等)屏幕所能显示的最小的区域,像素分为两种类型:CSS像素和物理像素。两者区别如下:

    • CSS像素:为web开发者提供,在CSS中使用的一个抽象单位;
    • 物理像素:只与设备的硬件密度有关,任何设备的物理像素都是固定的。

    (2)百分比,当浏览器的宽度或者高度发生变化时,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。一般我们的直观理解都会认为子元素的百分比完全相对于直接父元素。

    (3)em和rem相对于px更具灵活性,它们都是相对长度单位,而他们之间的区别可以用一句话来概括:em相对于父元素,rem相对于根元素。

    (4)vw/vh是与视图窗口有关的单位,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vw和vh外,还有vmin和vmax两个相关的单位。

    • vw:相对于视窗的宽度,视窗宽度是100vw
    • vh:相对于视窗的高度,视窗高度是100vh
    • vmin:vw和vh中的较小值
    • vmax:vw和vh中的较大值

    这个单位和百分比很类似,但是还是有区别的:

    • 百分比%:大部分相对于祖先元素,也有相对于自身的情况比如(border-radius、translate等)
    • vw/vm:相对于视窗的尺寸

    1. 响应式布局 && 自适应布局

    1.1 响应式布局

    首先,我们来看一下三星的官网:

    在这里插入图片描述

    我们可以看到,在不同终端下,它的网站的显示效果是不一样的。这就是根据设备的不同或者浏览器窗口的大小来进行不同的布局。在传统的开发中,往往是PC开发开发一套,手机端再开发一套。而使用响应式只需要开发一套就够了。

    响应式网站有以下特点:

    • 同时适配平板+PC+手机等多终端
    • 标签导航在接近手持终端设备时改变为经典的抽屉式导航
    • 网站的布局会根据视口来调整模块的大小和位置

    上面的三星的官网就符合这三个特点。

    响应式布局的优点:

    • 面对不同分辨率设备灵活性强;
    • 能够快捷解决多设备显示适用问题。

    响应式布局的缺点:

    • 效率较低,兼容各设备工作量大;
    • 代码较为累赘,加载时间会加长;
    • 在一定程度上改变了网站原有的布局结构,会出现用户混淆的情况

    所以,在页面不是很复杂的时候,可以使用响应式布局。

    1.2 自适应布局

    说到响应式布局,就不得不说一下自适应布局,这两种布局很容易混淆。

    自适应布局是指网页能够在不同大小的终端上自行适应显示,也就是在屏幕大小不同的终端上会显示一样的页面,它会根据屏幕的大小,自动缩放页面元素的大小。
    在这里插入图片描述
    自适应布局通常会有以下特点:

    • 多数情况下,只会适配哪些主流的视口大小,不会适配所有的视口
    • 当时口大小低于设置的最小视口大小时,界面会出现显示不全的情况,就会出现横向的滚动条

    自适应布局的优点:

    • 对网站复杂程度兼容更大;
    • 代码更高效;
    • 测试和运营都相对容易和精准。

    自适应布局的缺点:

    • 同一个网站需要为不同的设备开发不同的页面,增加的开发的成本。

    所以,在页面中信息较多,布局较为复杂的情况,可以采用自适应布局的方式。

    2. 响应式布局的实现

    2.1 媒体查询

    最常见的响应式布局实现方式就是媒体查询,CSS3中的媒体查询可以让我们针对不同的媒体类型定义的不同的样式,当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    我们可以通过设置断点,为各种屏幕宽度的设备提供对应的样式。断点一般可以设置为三种类型:

    • 手机(<=480px)
    • 平板(480-720px)
    • 桌面电脑(>=1024px)

    这当然只是大概的设置,如果想更加具体点,可以拖动浏览器屏幕,以适应不同的宽度,选择开始变形的那个尺度作为断点即可。

    第一步,设置媒体查询的meta标签:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    

    其中:

    • width=device-width: 自适应手机屏幕的尺寸宽度。
    • maximum-scale: 缩放比例的最大值。
    • minimum-scale: 缩放比例的最小值。
    • inital-scale: 缩放的初始化。
    • user-scalable: 用户的可以缩放的操作。

    第二步,使用媒体查询设置样式:

    @media screen and (max-width: 1024px){
        // 分辨率在720~1024px样式 
    }
    
    @media screen and (max-width: 720px){
        // 分辨率在480~720px的样式 
    }
    
    @media screen and (max-width: 480px){
        // 分辨率在0~480px的样式 
    }
    

    对于@Media查询的分界点,这个可以根据页面进行调整,设置合适页面的布局分界点。在设置分界点时,要注意先后顺序,当使用max-width数值大的在前面,数值小的在后面;当使用min-width时,数值小的放前面,数值大的放后面。通常来说,如果是移动端优先,则用min-width;如果是PC端优先,则用max-width

    移动优先 && PC优先
    不管是移动优先还是PC优先,都是依据当随着屏幕宽度增大或减小的时候,后面的样式会覆盖前面的样式。因此,移动端优先首先使用的是min-width,PC端优先使用的max-width。

    移动优先:

    @media screen and (max-width: 320px) {
        // 分辨率在0~320px的样式 
    }
    @media screen and (min-width: 480px){
        // 分辨率在480~720px的样式 
    }
    @media screen and (min-width: 720px){
        // 分辨率在720~1024px样式 
    }
    @media screen and (min-width: 1024px){
        // 分辨率在>=1024px样式 
    }
    

    PC优先:

    @media screen and (max-width: 1024px){
        // 分辨率在720~1024px样式 
    }
    
    @media screen and (max-width: 720px){
        // 分辨率在480~720px的样式 
    }
    
    @media screen and (max-width: 480px){
        // 分辨率在0~480px的样式 
    }
    

    媒体查询的实现方式有三种:

    • 在连接时调用:
    <link href="styles.css" rel="stylesheet" media="(max-width:480px)">
    
    • 使用@import导入:
    @import url(styles.css) (max-width:480px)
    
    • 在样式表中使用:
    @media (min-width: 481px) and (max-width:768px) {
        // 样式
    }
    

    MDN中关于媒体查询的介绍:链接

    2.2 百分比布局

    当浏览器的宽度或者高度发生变化时,通过百分比单位,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。

    height,width属性的百分比依托于父标签的宽高。但是,padding、border、margin等属性的情况又有所不同:

    • 子元素的top和bottom如果设置百分比,则相对于直接非static定位(默认定位)的父元素的高度,同样,子元素的left和right如果设置百分比,则相对于直接非static定位(默认定位的)父元素的宽度。
    • 子元素的padding如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的width,而与父元素的height无关。
    • 子元素的margin如果设置成百分比,不论是垂直方向还是水平方向,都相对于直接父元素的width
    • border-radius不一样,如果设置border-radius为百分比,则是相对于自身的宽度

    我们可以看到,百分比布局非常的麻烦,需要自己将元素的宽高换算成百分比的单位,并且需要考虑的因素很多,所以不建议使用。

    2.3 rem布局

    rem是CSS3新增的单位,并且移动端的支持度很高。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准,当页面的size发生变化时,只需要改变font-size的值,那么以rem为固定单位的元素的大小也会发生响应的变化。 因此,如果通过rem来实现响应式的布局,只需要根据视图容器的大小,动态的改变font-size即可(而em是相对于父元素的)。

    rem响应式的布局思想

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

    rem布局的缺点

    • 在响应式布局中,必须通过js来动态控制根元素font-size的大小,也就是说css样式和js代码有一定的耦合性,且必须将改变font-size的代码放在css样式之前

    2.4 视口

    CSS3中引入了一个新的单位vw/vh,与视图窗口有关,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vw和vh外,还有vmin和vmax两个相关的单位。各个单位具体的含义如下:

    • vw:相对于视窗的宽度,1vw 等于视口宽度的1%,视窗宽度是100vw
    • vh:相对于视窗的高度,1vh 等于视口高度的1%,视窗高度是100vh
    • vmin:vw和vh中的较小值
    • vmax:vw和vh中的较大值
      在这里插入图片描述
      用视口单位度量,视口宽度为100vw,高度为100vh(左侧为竖屏情况,右侧为横屏情况)。例如,在桌面端浏览器视口尺寸为650px,那么 1vw = 650 * 1% = 6.5px(这是一个理论值,如果浏览器不支持0.5px,那么实际渲染结果可能是7px)。

    3. 响应式布局中的问题

    3.1 图片的响应式

    图片响应式包括两个方面,一个就是大小自适应,这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况;一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片,也就是当在小屏幕上不需要高清图或大图,这样我们用小图代替,就可以减少网络带宽了

    1. 使用max-width(图片自适应):

    图片自适应就是图片能随着容器的大小进行缩放,可以采用如下代码:

    img {
        display: inline-block;
        max-width: 100%;
        height: auto;
    }
    

    inline-block 元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。 max-width保证了图片能够随着容器的进行等宽扩充(即保证所有图片最大显示为其自身的 100%。此时,如果包含图片的元素比图片固有宽度小,图片会缩放占满最大可用空间),而heightauto可以保证图片进行等比缩放而不至于失真。如果是背景图片的话要灵活运用background-size属性。

    那为什么不能用width:100%呢?因为这样会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下,图片会被拉伸。

    2. 使用srcset

    srcset属性用于浏览器根据不同的宽、高和像素密度来加载相应的图片资源,可以用来让在高密度屏幕上图片更好的显示。

    属性格式:图片地址 宽度描述w 像素密度描述x

    多个资源时用逗号隔开

    <img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">
    

    如果屏幕的dpi = 1,则加载1倍图;若dpi = 2,则加载2倍图。手机和mac基本上dpi都达到了2以上,这样子对于普通屏幕来说不会浪费流量,而对于视网膜屏来说又有高清的体验。如果浏览器不支持srcset,则默认加载src里面的图片。

    3. 使用background-image

    .banner{
      background-image: url(/static/large.jpg);
    }
    
    @media screen and (max-width: 767px){
      background-image: url(/static/small.jpg);
    }
    

    3.2 响应式布局的要点

    在实际项目中,我们可能需要综合上面的方案,比如用rem来做字体的适配,用srcset来做图片的响应式,宽度可以用rem,flex,栅格系统等来实现响应式,然后可能还需要利用媒体查询来作为响应式布局的基础,因此综合上面的实现方案,项目中实现响应式布局需要注意下面几点:

    • 设置viewport
    • 媒体查询
    • 字体的适配(字体单位)
    • 百分比布局
    • 图片的适配(图片的响应式)
    • 结合flex,grid,BFC,栅格系统等已经成型的方案

    3.3 盒子模型问题

    浏览器的盒子模型默认是不把边框和内边距计算在内容区的width中的(IE低版本除外),当使用流式布局时,就是百分比设置栏宽时,就会出现问题。如第一栏的width是60%,第二栏是40%,本来是一行内刚好放得下,但如果某一栏设置边框或者内边距后,整体宽度就被加大,第二栏就会被挤下去。

    所以我们可以设置box-sizing:border-box;,将边框和内边距计算进内容区的width中,即60%中包含了边框和内边距。

    3.4 HTML代码的顺序

    要注意HTML代码的顺序,因为很多时候我们的主内容区是放到中间的,如:

    <aside></aside>
    <article></article>
    <aside></aside>
    

    而在移动端时它应该放到最上面,可由于代码的顺序关系,清除浮动后,它是按顺序放到中间去了,(具体看上图)。为了增强用户体验,让移动端的用户第一眼就能看到主要内容,而不用下拉,所以HTML编码时,应该让主内容区放到最上层,要浮动时,加个外层,让主内容区和相邻侧边分别浮动到两边即可。大概代码:

    <div>
        <article></article>
        <aside></aside>
    </div>
    <aside></aside>
    
    div{
        float:left;
        width: 80%;
    }
    div article{
        float:right;
        width: 75%;
    }
    div aside{
        float:left;
        width: 25%
    }
    aside{
        float:left;
        width: 20%
    }
    

    3.5 成型的响应式布局方案

    现在的css,UI框架等都已经考虑到了适配不同屏幕分辨率的问题,实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案:

    • 利用上面的方法来实现,比如CSS3 Media Query,rem,vw等
    • Columns栅格系统,往往需要依赖某些框架,如Bootstrap、elementUI,iview等
    • Flex弹性布局,兼容性较差
    • Grid网格布局,兼容性较差

    最后

    在实际的应用中,比较简单的网站可以使用响应式布局来实现,在一些比较复杂的布局中,我们还是会选择开发多端的版本。所以,还是要根据实际的项目来进行选择。

    展开全文
  • 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面,手机端再开发一套...

    承蒙各位小伙伴的支持,鄙人有幸入围了《CSDN 2020博客之星》的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢!❤️ 每一票都是我坚持的动力和力量! https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743  

    作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始。

    微信公众号:AlbertYang 关注我更多精彩等你来发现!

    1 什么是响应式布局?

     响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天,我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面,手机端再开发一套页面。但是这样做非常麻烦,随着不同的终端越来越多,你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。EthanMarcotte在2010年5月份提出了响应式布局的概念,简而言之,就是一个网站能够兼容多个终端。

    开发方式移动web开发+PC开发响应式开发
     应用场景一般在已经有PC端的网站,开发移动站的时候,只需单独开发移动端。针对新建站的一些网站,现在要求适配移动端,所以就一套页面兼容各种终端,灵活。
     开发针对性强,开发效率高。兼容各种终端,效率低,
    适配只适配 移动设备,pad上体验相对较差。可以适配各种终端
    效率代码简洁,加载快。代码相对复杂,加载慢。

      响应式开发与移动端与PC端分别开发的区别:响应式开发只编写一套界面,通过检测视口分辨率,针对不同客户端在客户端做代码处理,来展现不同的布局和内容。移动端与PC端分别开发,通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机, 从而请求服务器,返回不同的页面。

    2 响应式开发的原理?

    响应式开发的原理是使用CSS3中的Media Query(媒体查询)针对不同宽度的设备设置不同的布局和样式,从而适配不同的设备。

    CSS3 @media 查询定义和使用:

    使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    例如屏幕宽度小于 500 像素则修改背景颜色(background-color)为红色。

    @media screen and (max-width: 300px) {
        body {
            background-color: red;
        }
    }

    设备的划分情况为:

    • 小于768的为超小屏幕(手机)

    • 768~992之间的为小屏设备(平板)

    • 992~1200的中等屏幕(桌面显示器)

    • 大于1200的宽屏设备(大桌面显示器)

    但是我们也可以根据实际情况自己定义划分情况。

    3 响应式页面开发实战

    3.1 视频

    视频地址:https://www.bilibili.com/video/BV1mr4y1T7w5

     

    3.2 HTML

    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>响应式页面入门教程:Albert Yang</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    </head>
    
    <body>
        <header>
            <a href="#" class="logo">AlbertYang</a>
            <ul class="navigation">
                <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>
                <li><a href="#">照片墙</a></li>
            </ul>
            <div class="search">
                <input type="text" placeholder="Search">
                <i class="fa fa-search" aria-hidden="true"></i>
            </div>
        </header>
        <div class="banner">
            <div class="content">
                <h2>响应式布局</h2>
                <p>
                    响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。
                    传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够了。
                    响应式设计与自适应设计的区别:响应式开发一套界面,
                    通过检测视口分辨率,针对不同客户端在客户端做代码处理,
                    来展现不同的布局和内容;自适应需要开发多套界面,
                    通过检测视口分辨率,来判断当前访问的设备是pc端、平板、手机,
                    从而请求服务层,返回不同的页面。CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式,
                    当重置浏览器窗口大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
                </p>
                <a href="#">阅读全文</a>
            </div>
            
            <img src="1.jpg" class="image">
        </div>
    </body>
    
    </html>

    3.3 CSS

    /* 清除浏览器默认边距,
    使边框和内边距的值包含在元素的width和height内 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    header {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 100px;
        z-index: 10;
        background: #5b639c;
    }
    header .logo {
        position: relative;
        font-size: 1.5em;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
    }
    header .navigation {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin: 10px 0;
    }
    header .navigation li {
        list-style: none;
        margin: 0 20px;
    }
    header .navigation li a {
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        letter-spacing: 1px;
    }
    header .navigation li a:hover{
        color: #ffed3b;
    }
    header .search {
        position: relative;
        width: 300px;
        height: 40px;
    }
    header .search input {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        background: transparent;
        outline: none;
        border: 1px solid #fff;
        border-radius: 5px;
        padding: 0 10px 0 45px;
    }
    header .search input::placeholder {
        color: #fff;
    }
    header .search .fa-search {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 10px;
        color: #fff;
        border-right: 1px solid #fff;
        padding-right: 10px;
    }
    .banner {
        background: #eee;
        padding: 200px 100px 100px;
        min-height: 100vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .banner .content {
        max-width: 1000px;
    }
    .banner .content h2 {
        font-size: 2.5em;
        color: #333;
        margin-bottom: 20px;
    }
    .banner .content p {
        font-size: 1em;
        color: #333;
    }
    .banner .content a {
        display: inline-block;
        background: #434978;
        color: #fff;
        padding: 10px 20px;
        text-decoration: none;
        font-weight: 600;
        margin-top: 20px;
    }
    .banner .image {
        max-width: 500px;
        margin-left: 50px;
    }
    /*屏幕宽度小于991px,改变布局和样式*/
    @media screen and (max-width:991px) {
        header {
            padding: 10px 20px;
            flex-direction: column;
        }
        .banner {
            padding: 150px 20px 50px;
            flex-direction: column-reverse;
        }
        .banner .image {
            max-width: 80%;
            margin-left: 0;
        }
        .banner .content h2 {
            font-size: 2em;
        }
    }
    /*屏幕宽度小于600px,改变布局和样式*/
    @media screen and (max-width:600px) {
        header .search {
            width: 100%;
        }
        .banner .image {
            margin-top: 30px;
        }
    }

    3.4 图片

    今天的学习就到这里了,由于本人能力和知识有限,如果有写的不对的地方,还请各位大佬批评指正。有什么不明白的地方欢迎给我留言,如果想继续学习提高,欢迎关注我,每天进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,评论,点赞!!!

     

    展开全文
  • [响应式布局]响应式布局技巧

    千次阅读 多人点赞 2016-10-09 01:39:08
    一理解几种布局的概念1、静态布局(Static Layout) 即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分; 意思就是不管浏览器尺寸具体是多少,网页布局就按照...

    ##一理解几种布局的概念
    ###1、静态布局(Static Layout)

    即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;
    意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置;
    对于移动设备,单独设计一个布局,使用不同的域名如wap.或m.。

    ###2、自适应布局(Adaptive Layout)

    自适应布局(Adaptive)的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变,但在每个布局中,页面元素不随窗口大小的调整发生变化。
    你可以把自适应布局看作是静态布局的一个系列。
    就是说你看到的页面,里面元素的位置会变化而大小不会变化;

    ###3、流式布局(Liquid Layout)

    流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示

    你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

    ###4、响应式布局(Responsive Layout)

    分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。
    可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
    每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。

    ##二 响应式布局步骤

    ###1.布局及设置meta标签

    当创建一个响应式网站,或者非响应式网站变成响应式的时候,首先要关注元素的布局。我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小,我觉得这个对在座的各位没有任何难度。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。

    当你完成当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到和标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
    

    user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。

    ###2.通过媒体查询来设置样式media query

    media query 是响应式设计的核心,它能够和浏览器进行沟通,告诉浏览器页面如何呈现,假如一个终端的分辨率小于980px,那么可以这样写

     @media screen and (max-width:980px){
         #head { … }
         #content { … }
         #footer { … }
    

    }
    这里面的样式会覆盖掉之前所定义的样式。

    ###3.设置多种视图宽度

    假如我们要兼容ipad和iphone视图,我们可以这样设置:

    /**ipad**/
    @media only screen and (min-width:768px)and(max-width:1024px){}
    /**iphone**/
     @media only screen and (width:320px)and (width:768px){}
    

    ###3.字体设置

    到目前为止,开发人员用到的字体单位大部分都是像素,虽然像素在普通网站上是Ok的,但是我们仍然需要响应式字体。一个响应式的字体应关联它的父容器的宽度,这样才能适应客户端屏幕。

    css3引入了新的单位叫做rem,和em类似但对于Html元素,rem更方便使用。

    rem是相对于根元素的,不要忘记重置根元素字体大小:

    html{font-size:100%;}
    完成后,你可以定义响应式字体:
    @media (min-width:640px){body{font-size:1rem;}}
    @media (min-width:960px){body{font-size:1.2rem;}}
    @media (min-width:1200px){body{font-size:1.5rem;}}
    不理解rem的童鞋,在这里给大家推荐一篇写的不错的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)
    

    ###4.响应式设计需要注意的问题

    1.宽度不固定,可以使用百分比

    #head{width:100%;}
    #content{width:50%;}
    

    2.图片处理

    在这里我给大家一把钥匙,有人会说,博主,能不能别装逼?图片处理还有啥钥匙,你以为是开门啊,博主,醒醒吧

    哎哟 ,我这暴脾气,我说的钥匙不是真的钥匙,而是指图片处理的万能方法,是什么呢?就是图片液态化。接着 会有人问:“什么是图片液态化”呢?这个问题问的很好,给你打99分,多给你一分怕你骄傲,大家都知道水无形 能适合很多容器,那么假如我们把图片当做水 是不是就可以实现图片自适应问题了呢?

    在html页面中的图片,比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的最大宽度,如:

    #wrap img{
        max-width:100%;
        height:auto;
    }
    如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充,height为auto的设置是为了保证图片原始的高宽比例,以至于图片不会失真。
    

    除了img标签的图片外我们经常会遇到背景图片,比如logo为背景图片:

    #log a{display:block;
            width:100%;
            height:40px;
            text-indent:55rem;
            background-img:url(logo.png);
            background-repeat:no-repeat;
            background-size:100% 100%;
            }
    background-size是css3的新属性,用于设置背景图片的大小,有两个可选值,第一个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值,那么另一个值默认为auto。
    background-size:cover; 等比扩展图片来填满元素
    background-size:contain; 等比缩小图片来适应元素的尺寸
    

    最后我们来总结下响应式布局的实现原理
    首先我们应该遵循移动端优先,交互和设计以移动端为主,pc则作为移动端的扩展,一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体)
    1.响应式布局
    1.Meta标签定义
    2.使用Media Queries适配对应样式
    2.响应式内容
    1.响应式图片

    展开全文
  • 到底什么是响应式布局,响应式布局如何去写

    万次阅读 多人点赞 2017-09-08 14:07:38
    即第一个问题--如何解决浏览器的兼容性被我们处理了之后,我们开始学习,如何解决响应式布局,到底什么是响应式布局 其实响应式布局.说的通俗点,就是浏览你写的网站或者说页面的容器不同,大小不同,有人用手机.有人用...
  • 前言:移动设备(手机、平板电脑...相关链接:【css】移动端自适应布局与字体大小自适应 前言二: 说到移动设备,一个不得不提就是viewport的设置了 &lt;meta name="viewport" content="width...
  • 1.js设置html根节点的字体大小; window宽度/每行多少个字 2、rem是参照html节点的 <html> <head> <title></title> <meta charset="utf8"> <script type="text/...
  • 响应式布局设计

    2015-01-07 10:14:59
    响应式布局, 相信大家都有一定的了解,响应式布局是现在很流行的一个设计理念,移动互联网越来越强大,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。...
  • 响应式布局详解

    2018-08-12 20:42:52
    响应式布局的目的:为移动设备提供更好的体验,用技术使网页适应从小到大不同分辨率的屏幕 有一句话对响应式布局的形容非常贴切:content like water。 1.viewpoint viewpoint:屏幕上用于显示网页的一块区域...
  • 第一:正确理解响应式布局 第二:响应式设计基本步骤 第三:响应式设计注意事项 第四:响应式布局实现原理 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端,而不是为每个终端都做一个...
  • css响应式布局

    2020-07-21 21:52:01
    响应式布局一、问题发现二、响应式1.标签2.设置视口3.响应式网页开发方法4.媒体查询5.单位值三、最佳选择 一、问题发现 在pc端 在移动端 同一个布局,在pc和移动端显示完全不同,我们不能一个网页开发两套,一个在...
  • 响应式布局小结

    2017-11-10 10:18:32
    我在创建响应式布局的时候习惯先写非响应式布局,页面固定宽度大小。如果完成了非响应式那么我在去添加媒体查询(Media Query)和响应式代码。这种操作更容易实现响应式特性。当你完成当你已经完成了无响应的网站,做...
  • 响应式布局图片像素的解决

    千次阅读 2018-03-20 17:55:46
    响应式图片和多媒体是响应式网站的三大基础重点之一。表面上看这是一件非常简单的事情,只要把图片元素的高、宽属性值都移去,然后设置max-width属性为100%即可。不过在这么做之前还需要考虑很多情况。·设计响应式...
  • 响应式布局

    2017-10-27 20:32:52
    响应式布局的开发基础知识 本章主要分为以下几个部分 正确理解响应式设计响应式设计的步骤响应式设计需要注意的问题 响应式网页布局实现原理 第一:正确理解响应式布局 响应式网页设计就是一个网站...
  • 关于响应式布局,你必须要知道的

    千次阅读 多人点赞 2019-08-30 09:30:08
    本文主要介绍一些响应式布局容易忽略但又很重要的知识点。 二、视口 移动前端中常说的 viewport (视口)就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小,特别是可以缩放浏览器窗口的情况下。手机端与PC...
  • 移动端基础及响应式布局

    千次阅读 2017-11-24 19:02:23
    2.响应式布局基础 3.响应式布局之流式布局 4.做移动端项目之前的准备 5.响应式布局demo 6.rem响应式布局 7.swiper的使用和轮播图 8.综合案例-微信场景应用1.移动端概述和hybird模式移动端:运行在移动设备上的...
  • 响应式布局这件小事

    2015-02-12 09:13:06
    讲到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。...
  • 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案。...
  • 响应式布局介绍: 什么是响应式布局 1、服务器根据不同的浏览器用户端,为用户呈现不同的页面效果。 2、可以让一个网站兼容不同分辨率的设备,给用户更好的视觉使用体验。 3、移动互联网催生了响应式布局的诞生...
  • 响应式布局内容

    2020-10-09 09:21:12
    响应式布局 课堂目标 掌握flex布局 掌握网格布局 掌握响应式布局 知识点 flex 布局(弹性布局)参考 分为主轴(main axis)和交叉轴(cross axis) flex容器属性: flex-direction:设置主轴的方向,默认 row ...
  • 当我们遇到这类型的问题,我们就会思考,怎么样才能做到,用户体验好的...意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置; 对于移动设备,单独设计一个布局,使用不同的域名如wap.或m...
  • html css 响应式布局

    千次阅读 2015-06-17 13:34:11
    讲到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。...
  • 前不久我的同学和我讨论响应式布局与栅格式布局的关系到底是响应式布局属于栅格式布局,还是栅格式布局属于响应式布局,个人觉得是栅格式布局属于响应式布局。因为之前的响应式布局没有学多少进去,所以我就又重新学...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,265
精华内容 6,506
关键字:

响应式布局改变图片大小