移动端和pc端，响应式设计布局

时间：2021-10-12 02:42:21

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>

移动端和pc端，响应式设计布局

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

移动端和pc端，响应式设计布局

加上代码后的样式：

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

　移动端和pc端，响应式设计布局

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

  1. 前端响应式设计中&commat;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&period;自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

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

  9. web设计经验&lt&semi;一&gt&semi; 提升移动设备响应式设计的8个建议

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

随机推荐

  1. document&period;body&period;scrollTop用法

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  2. 死锁 android ANR

    以下为一段ANR的LOG,主要是在WindowManagerService.java和ActivityManagerService.java中实现. W/WindowManager( 2183): K ...

  3. QTP DataTable全攻略&lpar;1&rpar;

    上一篇 / 下一篇  2009-07-27 00:14:16 / 个人分类:qtp 查看( 575 ) / 评论( 0 ) / 评分( 0 / 0 ) 下面的代码可能有点乱,基本涉及到常用的datat ...

  4. C&num;&sol;ASP&period;NET&sol;AJAX

      C#/ASP.NET/AJAX ASP.NET 4.5新特性一:强类型数据绑定(Strongly-Type Data-Bindings) 摘要: 随着ASP.NET 4.5的发布提供了很多的新特性 ...

  5. Jquery滚动到页面底部自动Ajax加载图文列表&comma;类似图片懒加载效果&comma;带加载效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. ELK学习总结（1-3）倒排索引

    1.倒排索引(反向索引) 一种索引方法,用来存储在全文检索下某个单词在一个/组文档中的存储位置. 常规索引,文档->关键词,费时,得把一个文档全部遍历一遍 倒排索引,关键词->文档,全文搜 ...

  7. Android Lollipop 5&period;0 经典新特性回顾

    *Tamic 专注移动开发! 更多文章请关注 http://blog.csdn.net/sk719887916 虽然Android已到了7.0 ,但是我们还是不能忘怀视觉革命性改变的5.0,今天回顾下 ...

  8. hid&period;dll

    hid.dll是USB的HID相关动态链接库文件,缺少它可能会造成usb设备无法正常使用.当你的电脑弹出提示“计算机缺少hid.dll”或“无法找到hid.dll Hkapi.dll HKComman ...

  9. 【Java每日一题】20170307

    20170306问题解析请点击今日问题下方的“[Java每日一题]20170307”查看(问题解析在公众号首发,公众号ID:weknow619) package Mar2017; public cla ...

  10. Grafana&plus;Telegraf&plus;Influxdb监控Tomcat集群方案

    前言 前一段时间自家养的几只猫经常出问题,由于没有有效的监控预警手段,以至于问题出现或者许久一段时间才会被通知到.凌晨一点这个锅可谁都不想背,为此基于目前的情况搭建了以下这么一套监控预警系统. 相关软 ...

相关文章