HTML5----响应式（自适应）网页设计

最新推荐文章于 2023-03-31 21:20:37 发布
最新推荐文章于 2023-03-31 21:20:37 发布
阅读量198 收藏 1
点赞数 2
分类专栏： js

现在，很多项目都需要做响应式或者自适应的来适应我们不同屏幕尺寸的手机，电脑等设备，那么就需要我们在页面上下功夫，下面我就来说一下如何做响应式（自适应）的网页设计

 

1、在网页代码的头部，加入一行viewport元标签

　　<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释：

　　1）width=device-width ：表示宽度是设备屏幕的宽度

　　2）initial-scale=1.0：表示初始的缩放比例，1.0就是占网页的100%

　　3）minimum-scale=1.0：表示最小的缩放比例

　　4）maximum-scale=1.0：表示最大的缩放比例

　　5）user-scalable=no：表示用户是否可以调整缩放比例

如果要兼容IE6/7/8的话，就要用css3-mediaqueries.js

1

2

3

<!--[if lt IE 9]> 

　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 

<![endif]-->

 

2、宽度不要用绝对的

　　width:auto; / width:XX%;  

 

3、字体大小是页面默认大小的100%，即16像素，不要使用绝对大小"px"，要使用相对大小“rem”

1

2

html{font-size:62.5%;}

body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; } 

　当然搭配媒体查询的样式会更好，比如

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

html{font-size:10px}　　　　　　10px==62.5%

 

@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

 

@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

 

@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

 

@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

 

@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

 

@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

 

@media screen and (min-width:800px){html{font-size:25px}}

 不过如果在PC端，最好用min-width，max-width，在移动端最好用min-device-width和max-device-width

4、流动布局，"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的

1

2

.left{ width:30%; float:left} 

.right{ width:70%; float:right;}

　像这样，用左浮动和右浮动，好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现

 

5、选择加载CSS

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件

1

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

　这段代码的意思是：如果屏幕宽度小于600像素（max-device-width: 600px），就加载css600.css文件。

如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件

1

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

还有(不建议使用)：除了用html标签加载CSS文件，还可以在现有CSS文件中加载

1

@import url("css600.css") screen and (max-device-width: 600px); 

　　

6、CSS的@media规则（如果有需要就写）

1

@media screen and (max-device-width: 400px) {  .left{ float:none;} }

　当屏幕宽度小于400px的时候，就取消浮动

 

7、图片自适应，"自适应网页设计"还必须实现图片的自动缩放。

1

img {width: 100%;} 

　windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令

1

img { width:100%; -ms-interpolation-mode: bicubic;} 

　或使用js--imgSizer.js　

1

2

3

4

addLoadEvent(function() { 

　　var imgs = document.getElementById("content").getElementsByTagName("img"); 

　　imgSizer.collate(imgs); 

});

　　

好，这样写出的网页就会自适应啦！　　

@小目标
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5自适应屏幕分辨率大小
weixin_33671935的博客
08-15 2371
　说明： ①：H5自适应不同分辨率的设备，其实主要就一句 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> width=device-width 屏幕宽度；initial-scale...
响应式设计中的HTML5
郭晓湉
07-19 2767
响应式设计的“移动优先”思想使它很适宜采纳最简洁、最有效和最具语义的代码。本次内容： HTML5的哪些部分我们现在就能用？ 如何编写HTML5网页 HTML5的精简之道 HTML5中的废弃零件 HTML5中的全新语义化元素 嵌入媒体 可响应的HTML5t iFrame视频 让网站支持离线使用 如何编写HTML5网页打开一个已有的网页。你可能会看到文件开头有这样几行代码：<!DOCTYPE html
HTML5----响应式（自适应）网页设计（自动适应屏幕大小）
热门推荐
码农翻身的博客
10-16 19万+
@media与@media screen两者在手机设备上没有区别，但@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，那么就用@media ，否则，就用@media screen。
html自适应头
weixin_30682127的博客
03-02 85
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=nominimal-ui"> 转载于:https://www.cnblogs.com/wyt007/p/6491050.html...
【原创作品】html5+css3+js+bootstrap实现响应式Web前端科技商城网站(包含多个页面)
go
04-19 5053
前言 曾经，我也是一个设计并写页面的纯前端媛，学着学着渐入偏锋，专业的缘故，入坑了后端，已经很久没有这样纯写前端静态网页了，这个是我大二写的静态页面，实现的是一个科技企业网站，包含主页及二级页面多个页面，登录注册用了点php+mysql实现，UI页面效果图是自己原创设计，哈哈，曾经学过设计，有点设计功底残存。废话不多说，看图~ 实现效果 目录前言实现效果一、网站需求分析二、效果图设计三、网站详细设计四、分工简介五、总结与心得 一、网站需求分析 （一）网站功能结构 随着网络技术的发展与互联网的普及，网站建
HTML5 响应式
Cc200171的博客
04-27 414
为什么使用新标签？ 为了语义化。 语义化好处：去掉样式能让页面结构清晰呈现 有益于SEO 便与团队开发和维护 一、结构标签 article 定义文章 aside 定义文章的的侧边栏 section 定义文档中的某个区域 nav 定义导航部分 header 头部信息 footer 底部信息 details 定义展开详细内容 figure 定义一组媒体元素及文字 <!DOCTYPE ht...
HTML5响应式（自适应）网页设计的实现
09-27
HTML5响应式网页设计是一种现代网页开发技术，旨在创建能够根据用户设备的屏幕尺寸和方向自动调整布局的网站。这种设计方法确保了网页在各种设备上（如桌面电脑、平板电脑、智能手机）都能提供一致且良好的用户体验...
html5模板-Parallelism自适应网页模板.zip
03-15
平行主义HTML5模板通过结合HTML5和CSS3的优势，为网页设计师和开发者提供了一个强大而灵活的基础，以构建现代、响应式和具有吸引力的网站。无论你是创建企业网站、个人博客还是电子商务平台，这个模板都能满足你的...
网页设计-白色简洁线条宽屏自适应html5模板.zip
03-18
总的来说，"网页设计-白色简洁线条宽屏自适应html5模板.zip"提供了一个现代、实用的网页设计起点，结合HTML5的强大功能和响应式设计原则，无论是个人博客、企业网站还是电子商务平台，都能从中受益。通过深入理解和...
小程序官网源码-自适应响应式企业网站
03-25
【小程序官网源码-自适应响应式企业网站】是一个专为现代企业设计的高级模板，旨在提供一个既能作为企业官方网站，又能适应小程序平台的多端展示解决方案。此模板以其大气而精致的设计，以及对不同设备的自适应能力...
h5响应式手机自适应茶叶网站html源码模板
12-28
【标题】"h5响应式手机自适应茶叶网站html源码模板" 提供了一套完整的网页设计框架，专为茶叶销售或相关信息展示的网站而设计。这个模板利用HTML5技术，确保了在不同设备上（如桌面、平板、手机）都能自适应显示，...
HTML5响应式网页设计知识点总结
05-18
HTML5响应式网页设计是现代网页开发的关键技术，它允许网页自动适应不同设备的屏幕尺寸，提供优秀的用户体验。本篇文章将深入探讨响应式设计的核心知识点，包括基础布局、页面美化和响应式技术。 首先，我们要了解...
PHP html5+bootstarp自适应响应式购物网站
09-02
《PHP HTML5+Bootstrap自适应响应式购物网站详解》 在当今互联网技术日新月异的时代，构建一个自适应、响应式的购物网站已经成为开发者的重要任务。"PHP HTML5+Bootstrap自适应响应式购物网站"正是这样一款适用于...
HTML网站源码-现代家居设计项目响应式网页模板-响应式源码.zip
最新发布
03-27
响应式网页设计的HTML网站源码是当今网络发展的趋势。它通过灵活的布局和自适应的设计，确保了网站在各种设备上都能提供最佳的观看体验。这套源码适用于不同规模的项目，无论是个人博客、企业宣传还是电子商务平台，...
响应式布局
weixin_39580806的博客
09-16 98
响应式布局就是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本 优点:1.面对不同的分辨率设备灵活性强 2.能够快速的解决多设备显示的适应问题 3.适合中小型网站 缺点:1.兼容于各种设备工作量大，效率降低 2. 代码累赘，以及加载事件过长 原理:通过媒体查询来定制某个宽度区间的网页布局 什么是媒体查询:他能检测我们设备的宽...
h5响应式布局、PC和移动端适配方案
weixin_45732455的博客
03-31 7440
总结一下在实习期间遇到的h5的响应式布局、PC和移动端适配方案的介绍、选择以及一些问题。
html5如何利用rem实现自适应布局,使用Rem布局实现自适应
weixin_42105570的博客
06-10 3752
之前写过一篇移动端适配的文章，很长，内容太多，看得容易凌乱，重新写个通熟易懂版的。为什么要自适应？比如，对于一个移动端页面，设计师给的视觉稿画布宽 750，视觉稿中的一个黄色区块的尺寸是 702 x 300，并在画板中居中。我们希望在任何一个设备中的呈现比例都与视觉稿中一样，根据布局视口宽度等比缩放。在移动端我们一般会设置布局视口宽度=设备宽度，即内容呈现的区域在设备屏幕内。但不同设备的宽度不同，...
HTML5响应式布局总结
qq_43392001的博客
03-02 741
什么是响应式？ 页面的响应式设计与开发就是根据用户行为及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。 一、viewport viewport 是用户网页的可视区域。 viewport的设置： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 其中，width：控制 vie...
响应式Web设计：HTML5与CSS3实战指南
响应式Web设计是一种现代网页设计方法，旨在创建能够适应不同设备屏幕尺寸和方向的网站。这种设计方式确保了无论用户是在桌面电脑、平板电脑还是智能手机上浏览，都能获得一致且优化的用户体验。《响应式Web设计：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值