1.什么是响应式 Web 设计?

  • 响应式 Web 设计让你的网页能在所有设备上有好显示。
  • 响应式 Web 设计只使用 HTML 和 CSS。
  • 响应式 Web 设计不是一个程序或Javascript脚本。

2.响应式的作用:设计最好的用户体验

友好的用户体验是网页可以在任何设备上展示和操作,设备包括桌面系统设备,平板电脑,iPhone等手机等。

网页应该根据设备的大小自动调整内容。

页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整称之为响应式 Web 设计。

3.自适应设计或者响应式设计的方法

(1)使用@media,条件(min-width: 768px)判断当浏览器的宽度小于768px值时,改变样式。

@media (min-width: 768px) {
.main {
width: 25%;
float: left;
}
}

通过媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件。

<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 400px)"
href="tinyScreen.css" />

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

link rel="stylesheet" type="text/css"
media="screen and (min-width: 400px) and (max-device-width: 600px)"
href="smallScreen.css" />

上面的代码意思是:如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

(2)宽度使用百分比,尽量少使用绝对值宽度。

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。

例如:

不能使用一下css代码:

div{width:xxx px}

在响应式中,应该这么使用:

div{
width:100%;
//或者
width:auto;
}

(3)字体的设置相对大小

移动端字体也不能使用绝对大小(px),而只能使用相对大小(em)或者高清方案(rem),rem不局限于字体大小,前面的宽度width也可以使用,代替百分比

body{
font: normal 100% Helvetica, Arial, sans-serif;//设置字体大小为默认大小,16像素
}

移动端设置字体大小:

在移动端上,设置字体为24px,则24/16=1.5,p的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

p{font-size: 1.5em}

(4)流动布局(fluid grid)

“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。

.leftDiv{
float: left;
width: 70%;
}
.rightDiv {
float: right;
width: 25%;

4.具体理解

在网页上,写一个普通的网页效果

<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -->
</head>
<style type="text/css">
p{border: 1px solid black;}
</style>
<body>
<div>
<p>响应式原理</p>
</div>
</body>
</html>

模拟手机上看到的样式,字体很小,看不清,是因为按照电脑上的像素对字体进行设置的,分辨率不一样。

加上代码后的样式:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  • viewport: 一般指的是浏览器窗口内容区的大小,不包含工具条、选项卡等内容
  • width: 浏览器宽度,输出设备中的页面可见区域宽度
  • device-width: 设备分辨率宽度,输出设备的屏幕可见宽度
  • initial-scale: 初始缩放比例
  • maximum-scale: 最大缩放比例

 

移动端和pc端,响应式设计布局的更多相关文章

  1. 前端响应式设计中@media等的相关运用

    现在做前端响应式网站特别,响应式成为现在前端设计一个热点,它成为热点的最主要的原因就是,移动端设备屏幕的种类多样,那么如何设置响应式屏幕. /*打印样式*/ @mediaprint{color:red ...

  2. 关于移动端和PC端的交互的区别

    对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计 ...

  3. CSS 响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  4. 响应式web布局设计实战总结教程

    响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media ...

  5. 一款由css3和jquery实现的响应式设计导航

    2014年响应式设计成为设计主流.今天要给大家带来一款由css3和jquery实现的响应式设计导航.当显示器为pc时,导航为横条.当客户端为移动端时,呈现坚形导航.我们一起看下效果图: 在线预览    ...

  6. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...

  7. JavaScript判断移动端及pc端访问不同的网站

    JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...

  8. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  9. web设计经验<一> 提升移动设备响应式设计的8个建议

    今天看到一些关于web设计的一些建议和设计经验,拿出来分享分享. 第一篇: 提升移动设备响应式设计的8个建议 一.直观性和易用性 在使用移动设备时,对于杂乱.复杂或者不直观的设计造成的混乱不佳的用户体 ...

随机推荐

  1. When you hit a wall, just kick it in.

    Teach Yourself Programming in Ten Years. ----- Peter Norvig Teach Yourself Programming in Ten Years  ...

  2. 爬虫工具--Beautifusoup

    import requests from bs4 import BeautifulSoup s=requests.Session() r=s.get('https://www.tumblr.com/l ...

  3. 解决远程登录mysql命令行无法登录问题

    由于甲骨文公司收购了mysql,mysql有商业化的趋势,所以想尝试安装下mariadb . yum install mariadb-server mariadb systemctl start ma ...

  4. kernel对NTP的API,系统调用函数

    kenrel API for NTP kernel 提供两个API(即系统调用 system call)给应用程序NTP,去校准kernel system clock Kernel Applicati ...

  5. Ubuntu中的Docker搭建Tensorflow环境

    一.docker环境安装 1)更新.安装依赖包 sudo apt-get update sudo apt-get install apt-transport-https ca-certificates ...

  6. 【hihocoder 1312】搜索三·启发式搜索(普通广搜做法)

    [题目链接]:http://hihocoder.com/problemset/problem/1312?sid=1092352 [题意] [题解] 从末状态的123456780开始逆向搜; 看它能到达 ...

  7. Mysql提升大数据导入速度的绝妙方法

    一.对于Myisam类型的表,可以通过以下方式快速的导入大量的数据.      ALTER TABLE tblname DISABLE KEYS;     loading the data     A ...

  8. UVA10200 Prime Time

    /* UVA10200 Prime Time https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8& ...

  9. Forge.autodesk平台的使用

    看了下面的这个网址的教程,发现其中的curl在git集成的shell中不好用,反复尝试后发现,&后面是没有空格的,记录下 https://forge.autodesk.io/

  10. codevs——T2102 石子归并 2

     http://codevs.cn/problem/2102/  时间限制: 10 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Des ...