网站建设_网站制作_网站设计_做网站公司,欢迎光临英铭专业建站官方网站!
英铭科技 - 网站建设&网站优化引领者网站建设、网站托管、网站优化一站式营销服务商
全国服务热线 020-8232 2722

响应式网站布局的开发基础知识

作者: 时间:2019-06-252571 次浏览

u=4291087043,1257494160&fm=26&gp=0.jpg


:正确理解响应式布局
 
响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端。
 
第二:响应式设计的步骤
 
了解了什么是响应式,那么接下来我们就要说说响应式设计的步骤,有人这时候会说“博主,你傻啊,响应式设计的步骤不就是1.编写非响应式代码、2.加工成响应式代码、3.响应式细节处理、4.完成响应式开发吗?”博主菊花一震 原来高手在民间啊,微微一硬表示敬重,我去 ,说错了 是微微一笑,大家不要误会啊。
 
言归正传,博主因为是刨根问底拦不组的,所以在此就往响应式设计的祖坟上刨,深入了解下这四个步骤。
 
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:;}
完成后,你可以定义响应式字体:
@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;}}
 
4.响应式设计需要注意的问题
 
1.宽度不固定,可以使用百分比
 
#head{width:;}
#content{width:50%;}
2.图片处理
 
在这里我给大家一把钥匙,有人会说,博主,能不能别装逼?图片处理还有啥钥匙,你以为是开门啊,博主,醒醒吧
 
哎哟 ,我这暴脾气,我说的钥匙不是真的钥匙,而是指图片处理的方法,是什么呢?就是图片液态化。接着 会有人问:“什么是图片液态化”呢?这个问题问的很好,给你打99分,多给你一分怕你骄傲,大家都知道水无形 能适合很多容器,那么假如我们把图片当做水 是不是就可以实现图片自适应问题了呢?
 
在html页面中的图片,比如文章里插入的图片我们都可以通过css样式max-width来进行控制图片的更大宽度,如:
 
    #wrap img{
        max-width:;
        height:auto;
    }
    如此设置后ID为wrap内的图片会根据wrap的宽度改变已达到等宽扩充,height为auto的设置是为了保证图片原始的高宽比例,以至于图片不会失真。
除了img标签的图片外我们经常会遇到背景图片,比如logo为背景图片:
 
    #log a{display:block;
            width:;
            height:40px;
            text-indent:55rem;
            background-img:url(logo.png);
            background-repeat:no-repeat;
            background-size: ;
            }
    background-size是css3的新属性,用于设置背景图片的大小,有两个可选值,个值用于指定背景图的width,第2个值用于指定背景图的height,如果只指定一个值,那么另一个值默认为auto。
    background-size:cover; 等比扩展图片来填满元素
    background-size:contain; 等比缩小图片来适应元素的尺寸
最后我们来总结下响应式布局的实现原理
首先我们应该遵循移动端优先,交互和设计以移动端为主,pc则作为移动端的扩展,一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体)
 
        1.响应式布局
           1.Meta标签定义
           2.使用Media Queries适配对应样式
        2.响应式内容


本文标签:
020-8232 2722