内刊设计不断为客户整合企业产品解决难题。 内刊设计不断为客户整合企业产品解决难题。
  • 首页
  • 官网制作教程
  • 官网网页设计
  • 官网公众平台
  • 怎么制作官网
  • 首页
  • 栏目
    • 官网制作教程
    • 官网网页设计
    • 官网公众平台
    • 怎么制作官网
  • 页面
官网制作公司首页 官网网页设计 如何把web前端网页做成自适应(自适应网页设计的概念)

如何把web前端网页做成自适应(自适应网页设计的概念)

作者:佚名 2021-09-09

如何把web前端网页做成自适应


1.首先,在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100
所有主流浏览器都支持这个设置,包括IE9,对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
2、不使用绝对宽度由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也

自适应网页设计的概念


2010年,Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个范例,里面是六个主人公的头像。
如果屏幕宽度大于1300像素,则6张图片并排在一行。
如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。
如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。
如果屏幕宽度在400像素以下,则6张图片分成三行。


如何制作自适应网页


首先,在网页代码的头部,加入一行viewport元标签。<meta name=”viewport”content=”width=device-width, initial-scale=1″ />viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩 放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝

730
猜你喜欢
  • 教你如何和宝宝做游戏(怎么样教孩子做游戏呢)
  • 教你如何免费制作一个网站 (附制作流程)(新手如何快速的学习网站制作)
  • 教你如何免费制作一个网站 (附制作流程)(网页·网站的制作)
  • 教你如何免费制作一个网站 (附制作流程)(我想做一个免费的网站 怎么做的)
  • 教你如何成为一个游戏策划(如何成为一名游戏文案策划)
推荐文章
教你如何和宝宝做游戏(怎么样教孩子做游戏呢)
教你如何免费制作一个网站 (附制作流程)(新手如何快速的学习网站制作)
教你如何免费制作一个网站 (附制作流程)(网页·网站的制作)
随机推荐
如何用MAKA做一个漂亮的微信H5(MAKA怎么设置在线报名?)
2021-09-14
个人公众号如何快速涨粉(已有的微信公众号如何再增加粉丝?)
2021-08-21
哪里有做网站的软件(手工制作的网站哪些?)
2021-09-03
  • 首页
Copyright © 2021 . 网站地图. .