PC端网站如何实现页面自适应,适配手机屏幕大小

作者:小站 来源:建站公司 2020-12-21 16:26

近些年自适应网站、响应式网站被推崇,几乎很多客户都会想要做移动端网站。其实PC网站基本也是可以改成自适应,页面的话需要进行重构,最重要的CSS样式及适配需要做好,细节再做优化。
说白了,把PC网站改成自适应的网站,那几乎等于重新做个移动版网站,毕竟人力和工期摆在哪边呢。

PC端网站如何实现页面自适应,适配手机屏幕大小

PC端网站如何实现页面自适应,适配手机屏幕大小

关于如何把现有HTML网页改成自适应的,小编就为大家整理如下内容供大家简单参考学习。

网页头部标签

首先在网页代码的头部,加入一行viewport标签
在网页的头部中增加以下这句话,可以让网页的宽度自动适应手机屏幕的宽度

 

 

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

width=device-width width为设置layout viewport 的宽度,为一个正整数,”width-device”表示宽度是设备屏幕的宽度
initial-scale=1.0 initial-scale为设置页面的初始缩放值,可以是一个带小数的数字,1.0就是占网页的100%
minimum-scale=1.0 表示最小的缩放比例
maximum-scale=1.0 表示最大的缩放比例
user-scalable=no 表示用户是否可以调整缩放比例,值为”no”或”yes”

宽度不用绝对的

width:auto; / width:XX%;(父元素一定要有宽度)

字体大小

一般是页面默认大小的100%,即16像素,不要使用绝对大小"px",要使用相对大小“rem”

 

 

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

html的字体大小设置为font-size:62.5%原因:浏览器默认字体大小是16px,rem与px关系为:1rem = 10px,10/16=0.625=62.5%,为了子元素相关尺寸计算方便,这样写最合适不过了。

流动布局

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

 

 

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

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

选择加载CSS

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

 

 

<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文件

 

 

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

还有(不建议使用):除了用html标签加载CSS文件,还可以在现有CSS文件中加载
@import url("css600.css") screen and (max-device-width: 600px);

CSS媒体查询

CSS的@media与@media screen,媒体查询/匹配


PC端网站如何实现页面自适应,适配手机屏幕大小首先先讲一下@media与@media screen区别媒体查询也是css3的方法,我们要解决的问题是适应手机屏幕
媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等。

PC端网站如何实现页面自适应,适配手机屏幕大小

PC端网站如何实现页面自适应,适配手机屏幕大小

@media与@media screen两者在手机设备上没有区别,但@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,如果css需要用在打印设备里,那么就用@media 。
语法
以@media或@media screen and开头来表示这是一条媒体查询语句。@media后面的是一个或者多个表达式,如果表达式为真,则应用样式。
@media

 

 

@media (max-width: 600px) {
.mainner {
display: none;
}
}

上面的代码在屏幕宽度小于 600px 的时候,会作用大括号里的内容。
注:max-width是目标显示区域的宽度,例如,浏览器宽度。
媒体查询可以在 link标签上加media属性或css文件中使用。具体例子就不举了。
@media screen
以下例子为当屏幕宽度小于400px的时候,就取消浮动

 

 

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

注:max-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。

知识扩展

@media only screen and
only(限定某种设备)
screen 是媒体类型里的一种
and 被称为关键字,其他关键字还包括 not
not 指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器

例如:如果浏览器窗口小于 500px, 背景将变为浅蓝色:

 

 

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

图片自适应

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

 

 

img {width: 100%;}

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

 

 

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

或使用js–imgSizer.js

 

 

addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});

实例代码:

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
body{
background: url(images/bg.png) no-repeat;
background-size:100% 100%;
background-attachment: fixed;
}
.container{
width: 100%;
text-align: center;
position: absolute;
top: 96px;
}
.container img{
transform: scale(0.8);
height: auto;
width: auto\9;
}
#img1{
width: 100%;
position: absolute;
bottom: 10px;
margin-bottom: 40%;
transform: scale(0.9);
/*background: yellowgreen;*/
}
#img2{
width: 100%;
position: absolute;
bottom: 20px;
margin-bottom: 12%;
transform: scale(0.9);
}

</style>
</head>
<body>
<div class="container">
<img src="images/logo@2x.png" alt="" />
</div>
<input type="image" src="images/iOS@2x.png" id="img2"/>
<input type="image" src="images/Android@2x.png" id="img1"/>
</body>
</html>

当然了,写到这里,除了图片自适应,那肯定也会需要涉及到视频自适应。毕竟现如今短视频和直播行业这么火热,网站具备自适应的视频播放那肯定也是一大亮点。

【总结】

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

当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到<head>和</head>标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。

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

当你已经完成了无响应的网站,做的第一件事是在你的 HTML 页面,粘贴下面的代码到<head>和</head>标签之间。这将设置屏幕按1:1的尺寸显示,在 iPhone 和其他智能手机的浏览器提供网站全视图浏览,并禁止用户缩放页面。

根据 W3C 网站,媒体查询由媒体类型和零个或多个媒体查询的条件表达式组成。通过使用媒体查询,外观呈现可以针对特定范围内的输出设备,而不需要改变内容本身。换句话说,媒体查询让您的网站在各种各种显示器上看起来都很好,从小的智能手机到大的电脑屏幕等等。

媒体查询取决于你的网站布局,所以对我来说为您提供一个现成可以使用的代码片段有点困难。但是,下面的代码对于大多数网站都是一个很好的起点。在这个例子中,#primary 是主要内容区域,#secondary 是侧栏。

从代码中你可以看到,我定义了两种规格:首先有一个最大宽度为1060px,为平板电脑优化的横向显示。#primary 占在其父容器宽度的67%,#senondary 占30%,再加上3%的左外边距。第二个规格是用于平板电脑和更小的屏幕尺寸。

由于智能手机的屏幕尺寸小,我决定给 #primary 设置100%的宽度,#secondary 也设置100%的宽度,他将在 #primary 下面。正如我已经说过的,你可能必须要对这段代码位进行修改才能适应您的网站的具体需求。

什么是响应式布局?我的理解是就是一套代码让他在不同的分辨率下通过局部调节,去适应不同的设备,不管你是电脑,pad.手机只要点开这个页面都可以很方便的浏览上面的信息。打个比方响应式布局就好比是一根皮带。对于腰粗的人扎皮带就多松几个扣子,对于腰细的人就少松几个扣子。整个网页就好比是这个皮带,响应式布局就相当于在皮带上设置几个扣子只要达到一定的标准整个网页的布局就能产生改变。

他的优点就是方便比较省事不需要去分别写不同的代码只需要对局部做一些修改就可以很方便实现,比较合适用在一些小网站,个人博客等等。

所以怎么样实现响应式布局如何让浏览器能自动的做出这些改变就很重要。配合媒体查询来实现这一过程,即media queries,针对不同的媒体类型定义不同的样式,从而实现响应式布局,还可以自定义不同分辨率下设置不同的样式。

常见的几种设备分辨率 :

1024分辨率以上:PC端

1024 ~ 768 : pad pro

768 ~ 450 : pad mini , mobile 横屏

450分辨率以下:mobile 竖屏

媒体查询的语法:

@media all and (min-width:500px){

}

针对特定范围:

@media all and (min-width:500px) and (max-width:800px){

}

针对横屏操作,只针对移动端,PC端的屏幕正常情况下都是竖屏的

@media all and (orientation:portrait){

}

注:部分内容转载自互联网


本文地址:高端网站建设频道 http://www.dayku.cn/gdwz/3258.html,武汉易企推建站公司提供一站式网站制作开发服务:武汉网站建设、网站开发、高端网站设计制作、手机网站开发,微信小程序开发等建站服务,制作周期短,价格实惠,效果满意;以及全网营销、网站优化服务、百科词条创建修改、新媒体引流、公司负面公关处理等


相关文章相关文章
  • 优质的企业网站建站标准都有哪些?

    优质的企业网站建站标准都有哪些?

    在网络时代下电子商务发展也是日新月异,随着电子商务的发展网站建设也是随之发生改变。从单一的功能,简单的网页制作也变成了要具备更多功能的实用性网站建设。不光要从美观程度上看更要站在用户的角度去进行建设,良好的用户体验才是网站营业的根本。那么...

    2021-01-09 17:06
  • 网站建设费用有哪些?网站的功能及需求决定网站的价格

    网站建设费用有哪些?网站的功能及需求决定网站的价格

    做网站多少钱?很多想做网站的人会问这个问题。目前来说制作网站的价格趋势是偏低的。尤其是企业网站的价格。得益于网站制作技术的普及,建设一个网站并不是一件很难的事。后台的开发有很多免费的CMS系统可以选择。制作中小型网站完全可以使用。而一些需要定...

    2020-12-31 17:25
  • 为何只有选择高端网站才能满足企业建站需求

    为何只有选择高端网站才能满足企业建站需求

    为何只有选择高端网站才能满足企业建站需求?如何做出企业客户想要的网站的呢?具体如何安装如何玩wordpress我这里就不做多说了,相信各位技术大佬在年轻的时候的博客就是用wordpress搭建自己人生中第一个博客,他的插件,主题应该是最吸引人的,并且目前很多...

    2020-12-05 20:03
  • H5响应式建站的好处,H5响应式建站优势是快速实现网站自适应

    H5响应式建站的好处,H5响应式建站优势是快速实现网站自适应

    什么是H5响应式建站?H5响应式建站的相对普通网站最大的特点是根据不同的设备来改变自身的布局,说白了就是不管你是PC端、手机端、iPad都可以使用自动改变页面的样式和布局,那么,我们在使用H5建站过程中,需要注意什么? H5响应式建站的好处,H5响应式建站...

    2020-12-04 21:47
  • 不做辣眼睛的网站,交互设计建站实例告诉你该如何做

    不做辣眼睛的网站,交互设计建站实例告诉你该如何做

    不做辣眼睛的网站,交互设计建站实例告诉你该如何做,在每个品牌定位与包装方案里,一定少不了时尚感强且令人舒适的网页界面这一项。美观大气、方便使用、界面清晰是每个品牌追逐的建站目标。 但是,首先,你得需要一个简洁别致、朗朗上口的域名。比如说:.CO...

    2019-09-16 21:13
  • 11年的建站老司机告诉你,高端网站"贵"的不只是价格!

    11年的建站老司机告诉你,高端网站"贵"的不只是价格!

    笔者有话说今天,笔者给大家分享的,是高端网站如何建设与设计.高端网站真正高端不是价格,而是在于下面这些方面。在营销型网站大行其道的今天,人们越来越认识到网站对于一个企业的重要性。 随着网站的高度普及,企业对网站的要求,也越来越求新,求变,我们也...

    2019-09-14 22:53
本地企业
              可提供上门服务

便捷

本地企业可提供上门服务

提供适合、专业可行方案

周到

提供适合、专业可行方案

5-10分钟售后响应机制<

贴心

5-10分钟售后响应机制

按效果收费,无效果不收费

放心

按效果收费,无效果不收费

行业高标准,效果稳定可靠

稳定

行业高标准,效果稳定可靠

1-3个月排名上百度首页

快速

1-3个月排名上百度首页

武汉易企推建站公司;公司地址:武汉市武昌区静安路6号5.5创意产业园4楼;公司官网:http://www.dayku.cn 手机站

服务热线:18120550335 / 027-88866235 欢迎来电咨询; 联系QQ:1193073039

Copyrigh@2017-2030 版权所有:武汉易企推网络科技有限公司 备案号:鄂ICP备17012199号 网站地图