响应式网站前端开发要掌握的基本知识

web前端响应式页面开发|前端开发页面自适应

响应式网站前端开发要掌握的基本知识

对于响应式的网站,我将从以下几方面进行总结,可能会有问题,希望看到的人可以帮我指正。

1.响应式与自适应的区别
 响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。

1.自适应是为了解决如何才能在不同大小的设备上呈现同样的网页。
2.响应式设计可以自动识别屏幕宽度,并作出相应调整的网页设计,布局和展示的内容可能会有所变动。

2.布局的类型以及实现方式#####

布局实现:

     采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局、可切换的固定布局、弹性布局、混合布局。

    ** 固定布局:**以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;
    **可切换的固定布局:**同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局;
  **  弹性布局:**以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;
   ** 混合布局:**同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。
  可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局方式:其中可切换的固定布局的实现成本最低,但拓展性比较差;而弹性布局与混合布局效果具响应性,都是比较理想的响应式布局实现方式。只是对于不同类型的页面排版布局实现响应式设计,需要采用不用的实现方式。通栏、等分结构的适合采用弹性布局方式、而对于非等分的多栏结构往往需要采用混合布局的实现方式。

布局响应
对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:桌面优先(从桌面端开始向下设计);移动优先(从移动端向上设计);
无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点),
我们通过js获取设备的屏幕宽度,来改变网页的布局,这一过程我们可以称之为布局响应屏幕。常见的主要有如下几种方式:

  ** 布局不变,即页面中整体模块布局不发生变化,主要有:**
        模块中内容:挤压-拉伸;
       模块中内容:换行-平铺;
       模块中内容:删减-增加;
    **布局改变,即页面中的整体模块布局发生变化,主要有:**
        模块位置变换;
        模块展示方式改变:隐藏-展开;
        模块数量改变:删减-增加;
      很多时候,单一方式的布局响应无法满足理想效果,需要结合多种组合方式,但原则上尽可能时保持简单轻巧,而且同一断点内(发生布局改变的临界点称之为断点)保持统一逻辑。否则页面实现得太过复杂,也会影响整体体验和页面性能。
3.响应式设计的步骤
      1.布局并设置Meta标签

                 当创建一个响应式网站,或让现有的网站变成响应式的,首先要关注的元素的布局。我在建立响应式的网站,总是先创建一个非响应的布局,页面宽度固定大小。如果非响应版本完成得非常不错,我再添加媒体查询(Media Queries)和响应式代码。这种操作方式更容易实现响应式特性,在同一时间专注于一个任务。

当你已经完成了无响应的网站,做的第一件事是在你的 html 页面,粘贴下面的代码到<head>和</head>标签之间。这将设置屏幕按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 = no 属性能够解决 iPad 切换横屏之后触摸才能回到具体尺寸的问题。

    2.通过媒介查询来设置样式 Media Queries

                Media Queries 是响应式设计的核心。
               它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 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 (min-width: 320px) and (max-width: 767px) {}

4.字体设置

    到现在为止,大多数开发人员(包括我自己)使用像素来定义字体的大小。虽然像素在普通网站使用是OK的,但是对于响应式网站来说应该有响应式的字体。事实上,一个响应式的字体大小应关联它的父容器的宽度,这样它才可以适应客户端的屏幕。
    CSS3 规范引入了一个新的单位叫 rem,和 em 类相似,但相对于 html 元素来说, rem 更易于使用。

rem 是相对于 html 元素的,不要忘了重置 html 的字体大小:
html { font-size:100%; }
完成后,您可以定义响应式的字体大小,如下所示:
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }

4.响应式设计需要注意的问题
      1.宽度不固定,可以使用百分比
    #head { width: 100% }
    #content { width: 50%; }

      2.处理图片缩放的方法
            简单的解决方法可以使用百分比,但这样不友好,会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了,就缩小。假如图片小了,就原尺寸输出。
             img { width: auto; max-width: 100%; }
            用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情,在 css3 中,任何元素都可以使用 content 属性了,这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能: HTML 结构:
           <img src="image.jpg" alt="折腾响应式布局设计"
                      data-src-600px="image-600px.jpg"
                       data-src-800px="image-800px.jpg"
               alt="">

        css控制:
    @media (min-device-width:600px) {
            img[data-src-600px] {
                    content: attr(data-src-600px, url);
            }
    }

    @media (min-device-width:800px) {
            img[data-src-800px] {
                    content: attr(data-src-800px, url);
            }
    }  
5.响应式网页布局的实现方法原理
            首先我们应该遵循移动优先原则,交互和设计应以移动端为主,PC则作为移动端的一个扩展;一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:响应式布局和响应式内容(图片、多媒体)。
                       1.响应式布局
                              1.Meta标签定义
                               2.使用Media Queries适配对应样式
                       2.响应式内容
                                1.响应式图片  

#####  6.响应式页面的简单例子

     1.  构造基本的HTML页面
     2.动态加载样式 
             @media screen and (max-width: 420px) {
                     .grid .item {
                                 width: 100%;
                                   margin-bottom: 5px;
                        }
             }
     3.Viewport
             <meta name="viewport" content="width=device-width, initial-scale=1">
     4.字体缩放
            em与rem的运用
     5.侧边栏 
          **html 代码**
@media only screen and (max-width: 650px) {
aside{
display:none;
}
.post{
width:100%;
float:none;
padding:5px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.grid{
width:100%;
}
.grid.item{
width:32%;
}
}
     6.导航菜单
       菜单几乎是体现响应式设计最直接的一个东西了。判断一个网站是不是响应式的最好方法就是改变浏览器窗口的大小,观察网站的布局,特别是菜单,在窗口缩小到足够窄的情况下一个经典的设计是隐藏原来的菜单而只展示由三根横线组成的图标。

由此我们可以看到一些实现上的端倪,除了常规菜单外,我们需要在HTML代码中事先摆放好这样一个横线图标元素。
html 代码

<nav>
<ul>
<ahref=”#” id=”menuIcon”>Ξ</a>
<li>
<ahref=”#”>Home</a>
</li>
<li>
<ahref=”#”>Articles</a>
</li>
<li>
<ahref=”#”>Gallery</a>
</li>
<li>
<ahref=”#”>Forum</a>
</li>
<li>
<ahref=”#”>About</a>
</li>
</ul>
</nav>

html 代码

nav li a:hover,
#menuIcon:hover {
color:#DDD;
}
#menuIcon {
display:none;
color:white;
font-weight:bold;
font-size:2em;
text-decoration:none;
font-family:arial;
}

html 代码

@media screen and (max-width: 500px) {
navul{
display:none;
padding:0;
margin:05px;
}
#menuIcon{
display:block;
text-align:right;
padding:05px;
border-bottom:1px#9c9c9csolid;
}
navulli{
width:100%;
}
navulli:hover{
background-color:#555;
}
}

html 代码

<script type=”text/javascript”>
$(function(){
$(“#menuIcon,nav ul li”).click(function(){
if ($(“#menuIcon”).is(“:visible”)) {//防止宽屏上点击
$(“nav ul”).toggle(300);
};
});
$(window).resize(function(){
if (!$(“nav ul”).is(“:visible”)) {
$(‘nav ul’).attr(‘style’,function(i,style){
returnstyle.replace(/display[^;]+;?/g,”);
});
};
});
})
</script>
     7.图片自适应
          img{max-width:100%;}
     8.其他
           可以看到窗口很窄的时候这三个div被挤压得很厉害,所以假设窗口小于420px时,我们让它们各自独立一行,占满整个窗口宽度。

           @media screen and (max-width: 420px) {
              .grid .item {
                    width: 100%;
                    margin-bottom: 5px;
                }
           }

     总体代码:
                 **html 代码**
<html>
<head>
<title>前端开发pc页面</title>
<metahttp-equiv=”content-type” content=”text/html;charset=utf-8″ />
<metaname=”viewport” content=”width=device-width, initial-scale=1″>
<script type=”text/javascript” src=”jquery-2.1.4.min.js”></script>
<style>
html{
font-family:”microsoft yahei”,arial
}
body{
margin:0;
}
li{
list-style:none;
}
/*navigation bar*/
nav{
background-color:#333;
}
navli{
display:inline-block;
padding-right:10px;
}
navlia{
text-decoration:none;
color:white;
font-size:1.5em;
}
navlia:hover,
#menuIcon:hover{
color:#DDD;
}
#menuIcon{
display:none;
color:white;
font-weight:bold;
font-size:2em;
text-decoration:none;
font-family:arial;
}
/*sidebar*/
aside{
width:15%;
float:left;
}
/*post*/
.post{
width:70%;
margin:0auto;
float:left;
}
/*grid layout*/
.grid{}
.grid.item{
width:25%;
height:150px;
background-color:#DDD;
display:inline-block;
}
/*footer*/
footer{
width:100%;
text-align:center;
clear:both;
}
footerli{
display:inline-block;
}
img{
max-width:100%;
}
@mediaonlyscreenand(max-width:650px){
aside{
display:none;
}
.post{
width:100%;
float:none;
padding:5px;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.grid{
width:100%;
}
.grid.item{
width:32%;
}
}
@mediascreenand(max-width:500px){
navul{
display:none;
padding:0;
margin:05px;
}
#menuIcon{
display:block;
text-align:right;
padding:05px;
border-bottom:1px#9c9c9csolid;
}
navulli{
width:100%;
}
navulli:hover{
background-color:#555;
}
}
@mediascreenand(max-width:420px){
.grid.item{
width:100%;
margin-bottom:5px;
}
}
</style>
<script type=”text/javascript”>
$(function(){
$(“#menuIcon,nav ul li”).click(function(){
if ($(“#menuIcon”).is(“:visible”)) {//防止宽屏上点击
$(“nav ul”).toggle(300);
};
});
$(window).resize(function(){
if (!$(“nav ul”).is(“:visible”)) {
$(‘nav ul’).attr(‘style’,function(i,style){
returnstyle.replace(/display[^;]+;?/g,”);
});
};
});
})
</script>
</head>
<body>
<divid=”main”>
<nav>
<ahref=”#” id=”menuIcon”>Ξtgtgt</a>
<ul>
<li>
<ahref=”#”>Home</a>
</li>
<li>
<ahref=”#”>Articles</a>
</li>
<li>
<ahref=”#”>Gallery</a>
</li>
<li>
<ahref=”#”>Forum</a>
</li>
<li>
<ahref=”#”>About</a>
</li>
</ul>
</nav>
<aside>
<ul>
<li>
<ahref=”#subtitle1″>item1</a>
</li>
<li>
<ahref=”#subtitle2″>item2</a>
</li>
<li>
<ahref=”#subtitle3″>item3</a>
</li>
<li>
<ahref=”#subtitle4″>item4</a>
</li>
<li>
<ahref=”#subtitle5″>item5</a>
</li>
</ul>
</aside>
<sectionclass=”post”>
<article>
<h1>
Sample Title
</h1>
<p>
<p>
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code
for the video you want to add. You can also type a keyword to search online for the video that best
fits your document. To make your document look professionally produced, Word provides header, footer,
cover page, and text box designs that complement each other. For example, you can add a matching
cover page, header, and sidebar. Click Insert and then choose the elements you want from the different
galleries. Themes and styles also help keep your document coordinated. When you click Design and
choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When
you apply styles, your headings change to match the new theme. Save time in Word with new buttons
that show up where you need them.
</p>
</p>
<p>
<sectionclass=”grid”>
<divclass=”item”>
#1
</div>
<divclass=”item”>
#2
</div>
<divclass=”item”>
#3
</div>
</section>
<imgsrc=”../images/11.png” width=”1147″ height=”598″>
<p>
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code
for the video you want to add. You can also type a keyword to search online for the video that best
fits your document. To make your document look professionally produced, Word provides header, footer,
cover page, and text box designs that complement each other. For example, you can add a matching
cover page, header, and sidebar. Click Insert and then choose the elements you want from the different
galleries. Themes and styles also help keep your document coordinated. When you click Design and
choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When
you apply styles, your headings change to match the new theme. Save time in Word with new buttons
that show up where you need them.
</p>
</p>
</article>
</section>
<footer>
<hr>
<ul>
<li>
<small>Wayou &copy 2013|</small>
</li>
<li>
<small>
<ahref=”mailto:sample@somesite.com”>Contact</a>
</small>
</li>
</ul>
</footer>
</div>
</body>
</html>
div css 前端页面开发|前端开发的页面|前端开发的手机页面的排版
» 本文来自:前端开发者 » 《响应式网站前端开发要掌握的基本知识》
» 本文链接地址:https://www.rokub.com/3516.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!