整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
Axure新技能：自适应手机屏幕大小》相信不少人都已经看过，并对设置方法已经很熟悉了，但该教程只能适应iphone6的屏幕尺寸的比例，在iphoneX出来后屏幕比例改变了，旧的方法已经不能适应目前的全面屏手机了，但现在不用担心了，笔者已经有新的方法可以去适应市面上98%移动设备（包括手机和平板）屏幕的，让大家在演示原型的时候更加得心应手了。
目录：
我们把原型的宽度定为：375px（高度不限制，根据需要设置）。
（1）把元件按需求组合并转为动态面板，并设置为自动调整内容尺寸。
（2）需要在头部固定的设置固定到浏览器，水平靠左、垂直靠上、始终保持顶层。
（3）中间列表滚动部分不需要设置固定到浏览器
（4）需要在底部固定的设置固定到浏览器，水平靠左、垂直靠下、始终保持顶层。
其它的设置我就不多说了，主要说一下移动设备的设置。
以上是建议尺寸，也可以使用其它的尺寸。
最重要的初始缩放倍数千万不要填写，填写以后默认就以iphone6（设置的）的尺寸访问，需要你缩放一下才能够正常全屏显示，如果没有设置，则自动以你移动设置大小进行全屏显示。
发布完以后，放至网上，这个时候我们就可以用移动设备进行访问了，我们可以看到无论是iphone5的4.3尺寸还是iphonex的5.8尺寸都是正常全屏显示的。
请不要使用带工具栏的页面访问，这两个页面都是带工具栏的index.html,start.html。可以使用这个网址查看效果：https://zgdyvg.axshare.com/index.html
IOS使用自带的Safari浏览器，Android使用Chrome浏览器均可创建快捷方式到桌面，隐藏浏览器导航栏。
IOS方法：
Android方法：
点击桌面生成的图标就可以访问了，现在看上去是不是很像APP呢。
原型访问的方法有很多，大家都可以根据自己的实际情况进行选择，本文只是提供可以自适应手机屏幕大小的方法，把原型放在手机上更多的时候是为了方便外出演示的时候，给客户查看一种实际的效果，所以建议使用高保真原型比较妥。
原型只是展示和沟通的一种方式，并非产品经理的全部，请不要本末倒置，产品经理应该更注重在沟通、思维、逻辑、业务上，当然有时间把原型做好做漂亮也是一种技能。
作者：Han ，深圳产品狗一枚，目前在某个不知名电商任职产品经理，欢迎相约交流。
本文由 @Han 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自Unsplash，基于CC0协议
保证布局内每一级必须设置相对于父级百分比宽度，但设计稿一般都是按照固定宽度设计，内部图片都是固定大小，拉伸或者缩放时都会导致变形，虽然都够实现布局宽度上的自适应，但分辨率过高或者过低时都无法达到一个良好的显示效果，需要设置min-width和max-width来保证页面最基本的视觉效果
<!DOCTYPE html>
<html>
<head>
<title>Flow Layout Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 30%;
margin-bottom: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
通过CSS3的媒体查询，根据不同的屏幕尺寸区间设置不同的样式效果，和不同尺寸的图片，来保证页面图片显示不失真，布局元素错乱。当分辨率过低 元素数量众多时 可控制子元素的显示和隐藏，以及其他效果组件的展示，比方横向tab展示 变更为下拉选择 vscode
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.my-image {
width: 30%;
margin-bottom: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
background-image: url('image-large.jpg');
}
/* 当分辨率在320px到768px之间时，将item元素的背景设置为image-small.jpg */
@media screen and (min-width: 320px) and (max-width: 768px) {
.item {
background-image: url('image-small.jpg');
font-size:12px
}
}
/* 当分辨率大于768px时，将item元素的背景设置为image-large.jpg */
@media screen and (min-width: 769px) {
.item {
background-image: url('image-big.jpg');
font-size:14px
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">hc 1</div>
<div class="item">hc 2</div>
<div class="item">hc 3</div>
</div>
</body>
</html>
栅格布局是一种网格化的页面布局方式，它由行和列组成，可以使开发者更容易地创建多种不同大小和位置的元素，并通过调整这些元素的行和列来实现响应式设计。栅格布局适用于各种设备尺寸，使得页面在各种屏幕上都能够正常显示。 在栅格布局中，开发者可以定义一个网格容器，然后在容器中定义行和列，用来划分网格。每个网格可以放置一个或多个元素。通过调整每个元素所占据的行和列，以及它们之间的距离，可以实现各种页面布局效果。
<template>
<div>
<iv-row :gutter="16">
<iv-col :span="8">
<!-- 左边 -->
</iv-col>
<iv-col :span="8" :offset="4">
<!-- 中间内容 -->
</iv-col>
<iv-col :span="4">
<!-- 右侧内容 -->
</iv-col>
</iv-row>
</div>
</template>
Flex布局也可以用来实现栅格布局，它提供了一些灵活的属性来定义网格元素的排列和位置。相比于传统的栅格布局，Flex布局更加灵活，并且在响应式设计上具有更好的适应性。 以下是Flex布局常用的一些属性
display：定义flex容器，默认值为flex。 flex-direction：定义主轴的方向，包括row、row-reverse、column、column-reverse四个值。 justify-content：定义主轴上网格元素的对齐方式，包括flex-start、flex-end、center、space-between、space-around五个值。 align-items：定义交叉轴上网格元素的对齐方式，包括flex-start、flex-end、center、baseline、stretch五个值。 flex-wrap：定义网格元素是否换行，默认情况下都不换行，可选nowrap、wrap、wrap-reverse三个值。 order：定义网格元素的显示顺序，默认为0，数值越小越靠前。 flex-grow：定义网格元素在剩余空间中所占的比例。 flex-shrink：定义弹性子元素的缩小比例。 flex-basis：定义弹性子元素的基准大小。 flex：是 flex-grow、flex-shrink 和 flex-basis 的简写形式。 align-self：定义单个网格元素在交叉轴上的对齐方式。
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
/* flex-grow：1 子元素分配剩余空间* 0 有空间也不放大 2 大一倍/
.item {
flex-grow: 1;
height: 100px;
background-color: gray;
margin: 10px;
text-align: center;
font-size: 30px;
line-height: 100px;
}
.item-1 {
flex-basis: 200px;
}
/* item-2 如何和他俩在一个主轴 始终会比他们大200px*/
.item-2 {
flex-basis: 400px;
}
.item-3 {
flex-basis: 200px;
}
</style>
display：定义为网格容器。 grid-template-areas：指定网格模板中的区域名称。 -grid-template-columns：指定网格列的大小。 -grid-template-rows：指定网格行的大小。 grid-template：是 grid-template-areas、grid-template-columns 和 grid-template-rows 的简写形式。 grid-auto-columns：指定未显式指定宽度的列的大小。 grid-auto-rows：指定未显式指定高度的行的大小。 grid-auto-flow：指定如何安排未被显式布局的项。 grid-column-gap：设置网格行之间的间距。 grid-row-gap：设置网格列之间的间距。 grid-gap：是 grid-row-gap 和 grid-column-gap 的简写形式。
grid-area：是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写形式。 grid-column-start：指定一个项目的列开始位置。 grid-column-end：指定一个项目的列结束位置。 grid-row-start：指定一个项目的行开始位置。 grid-row-end：指定一个项目的行结束位置。 grid-column：是 grid-column-start 和 grid-column-end 的简写形式。 grid-row：是 grid-row-start 和 grid-row-end 的简写形式。 grid-area：指定项目应该放置在哪个网格区域中。 justify-self：定义单个项目在其列中的对齐方式。 align-self：定义单个项目在其行中的对齐方式。 place-self：是 align-self 和 justify-self 的简写形式。
可以将一个元素及其子元素的所有尺寸都放大或缩小。默认的缩放值是1，表示不进行任何缩放。如果将缩放值设置为2，则元素及其子元素的所有尺寸都会变为原来的两倍；如果将缩放值设置为0.5，则元素及其子元素的所有尺寸都会变为原来的一半。 zoom在兼容性上存在一些问题，目前火狐浏览器是不支持，其他浏览器支持，存在一定的风险性
实现方式不同：transform: scale() 是通过 CSS3 的 transform 属性进行缩放，而 zoom 是通过浏览器提供的缩放功能实现的。 兼容性不同：transform: scale() 属性在大部分现代浏览器中得到支持，而 zoom 属性只在 IE 浏览器和 Edge 浏览器中得到支持。 对布局影响不同：使用 transform: scale() 属性进行缩放时，元素的尺寸、位置等属性会改变，但对周围元素的布局不会产生影响。而使用 zoom 属性进行缩放时，元素及其周围的元素都会被缩放，因此可能会影响整个页面的布局。
rem是CSS3新增的一个相对单位，它是相对于根元素（html元素）的字体大小来计算的。rem的全称是"root em"，意为"根em"。
使用rem作为长度单位，可以实现页面的自适应布局。当用户调整浏览器窗口大小或者在移动设备上旋转屏幕时，页面中所有元素的大小都会根据当前根字体大小的比例进行缩放，从而适应不同的屏幕尺寸和设备类型。
使用rem作为单位有以下优点：
相对于像素单位（px）更具有可扩展性，可以适应各种不同分辨率的设备。 相对于百分比单位（%）更加直观，不需要手动计算每个元素的百分比值。 支持低版本浏览器，如果无法识别rem单位，也可以提供降级方案。
们将根元素字体大小设置为页面宽度的百分之一，即font-size: calc(100vw / 100)。然后，在样式表中使用rem作为单位对元素进行设置，例如.box { width: 20rem; height: 10rem; font-size: 1.6rem; }。这样，当浏览器窗口大小改变时，根元素字体大小也会随之改变，从而实现页面的自适应布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rem布局示例</title>
<style>
/* 设置根元素字体大小 */
html {
font-size: calc(100vw / 100);
}
/* 使用rem设置元素属性 */
.box {
width: 20rem;
height: 10rem;
font-size: 1.6rem;
border:1rem solid #00000
}
</style>
</head>
<body>
<div class="box">这是一个自适应布局的示例</div>
</body>
</html>
npm install postcss-pxtorem postcss-loader --save-dev
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基础字体大小
propList: ['*'], // 要转换的属性列表，这里表示所有属性都要进行转换
selectorBlackList: [], // 不需要转换的选择器，可以是字符串、正则表达式或者数组
unitPrecision: 5 // 转换后的rem值保留小数位数
}
}
}
{
test: /.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: './path/to/postcss-config.js'
}
}
}
]
}
.container {
width: 320px;
font-size: 14px;
}
这样，在编译时，postcss-pxtorem会自动将像素单位转换为rem单位。对于上述样式代码，转换后的结果如下：
.container {
width: 20rem; /* 320 / 16 = 20 */
font-size: 0.875rem; /* 14 / 16 = 0.875 */
}
通过使用postcss-pxtorem插件，可以简化自适应布局的实现，并且不需要手动计算每个元素的rem值。
作者：二哈怕不怕
链接：https://juejin.cn/post/7301985758467244043
如今人们经过手机阅读网页占了大多数，随着阅读方式的改动，网页完成多终端自适应，无论关于防止工程师无谓的反复劳动或者是项目管理的便利性上来说重要性都是非常巨大的。
由于挪动设备越来越多的被人们运用，手机成为访问互联网的最常见终端，而我们设计的网页确是为了呈如今PC端。
手机的屏幕比拟小，宽度通常在600像素以下，而PC的屏幕宽度，普通都在1000像素以上（目前主流宽度是1366×768），有的还到达了2000像素。同样的内容，要在大小悬殊的屏幕上，都呈现出称心的效果，并不是一件容易的事。
很多网站的处理办法，是为不同的设备提供不同的网页，比方特地提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比拟费事，同时要维护好几个版本，而且假如一个网站有多个portal（入口），会大大增加架构设计的复杂度。
自适应是为了解决如何在不同大小的设备上呈现同样的网页。
如何进行自适应网页设计
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。
要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。
流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载a.css文件。
link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"
如果屏幕宽度在400像素到600像素之间，则加载b.css文件。
自适应与响应式的区别
自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小。但是无论怎样，他们主体的内容和布局是没有变的。
自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。
响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。
相比自适应网站，响应式网站省去了很多的控件，同时也省去了不少建立和维护的功夫。响应式布局就是一种流体，在按百分比缩放时也能相当的流畅。
使用响应式设计，你要记住所以的布局。这当然可能会使过程混乱，并且使设计更加复杂。这就意味着你应该专注于中等分辨率的视图，然后再用media querie调整为更低或更高的分辨率。 所以通常的做法是，在一个新的项目中使用响应式设计，在后期的改造中使用自适应设计。
自适应可用于改造现有的网站使其更好地适应移动端。这使你的设计可控制和开发多个特定的视图。你开发视图的数量完全取决于你，你的公司和全面的预算。然而，它也提供了一定量的控件（例如在内容和布局上），如此你便无须使用响应式设计。但当你设计多种分辨率时你会发现，在改变窗口大小的时候将会“跳出”布局。
自适应网站可以用于设计和开发一个拥有多个自适应视图的网站。所以这种设计通常用于改造网站。
*请认真填写需求信息，我们会在24小时内与您取得联系。
