‘壹’ 移动端网站制作的有哪些要求
要遵循的规则就是尽量保持整洁，不要显得过于杂乱，由于乱糟糟网站会影响到客户的注意力，在手机网站界面，在保持原有的风格的基础上，尽可能的布局合理。因为手机网站客户是由上往下看，因而在制作网站中应该是重要的信息往前放，次要的内容瞎并往后放的规则，这样可以让用户获取重要的信息，降低网站高跳出率的出现。
公司在为自己的网站选择设计方式时要根据企业的实际情况和目标来选择，一定要选择适用公司自己的页面设计方案。不过对于大部分的中小型企业来说，响应式网站制作既能节约手机网站营运费用，又可为潜在用户提供友好的网站体验。
在建造手机网站的内容时，筛选上要精挑细选。在网站上展现企业的中心产品而不是可有可无的东西。通常来说，客户在移动端打开公司的手机网站是有目的的，棚喊很有可能是希望在网站中能够明白到产品的单价以及其他的参数等。企业应该在网站上展现这类信息。手机网站能够实现与页面同样的作用，可以及时的提供公司的商品信息。
只要将资料存放在手机网站上，就能够随时随地进行信息的更新，降低了宣传和运营的费用，一定程度上讲便是减少企业费用的支出。因为网站的导航栏在移动端的显示有局限，因此手机制作网站时，导航栏应该要遵循极简规则，尽量将核心内容浓缩为导航，使客户看起来通俗易懂。
总而言之，格子网络觉得手磨和迹机网站的制作不是盲然的，更不复杂，公司打造一个容易漂亮的手机网站不仅能够为用户带来好的体验，也将是企业发展有效的方法渠道之一。尽管手机网站开发要比传统网站容易，然而仍旧要对两个网站进行相同元素的匹配。在其手机网站开发和传统网站都采用了同样色系和图标。
‘贰’ pc网站有了，怎么做手机适应的网站
一、PC网站自动适配手机网页的7个步骤
一般来说，移动适配主要通过底层的web技术开发手段来完成，下面马海祥将通过移动适配技术的角度来告诉你通过7个步骤来完成一个PC网站向移动设备的跳跃！
1、允许网页宽度自动调整
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签，viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
2、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素，这一条非常重要。
具体说，CSS代码不能指定像素宽度：width:xxxpx;
只能指定百分比宽度：width:xx%;或者width:auto;
3、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
body{
font:normal100%Helvetica,Arial,sans-serif;
}
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
h1{
font-size:1.5em;
}
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
small{
font-size:0.875em;
}
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
4、流动布局（fluidgrid）
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main{
float:right;
width:70%;
}
.leftBar{
float:left;
width:25%;
}
float的好处是，如果宽度太小，放不下两个元袭改素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position:absolute）的使用，也要非常小心。
5、选择加载CSS
“自适应网页设计”的核心就是CSS3引入的MediaQuery模块，它的意思就是，自动探测屏幕扒禅亮宽度，然后加载相应的CSS文件。
media=”screenand(max-device-width:400px)”
href=”tinyScreen.css”/>
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width:400px），就加载tinyScreen.css文件。
media=”screenand(min-width:400px)and(max-device-width:600px)”
href=”smallScreen.css”/>
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
6、CSS的@media规则
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不春宽同的CSS规则。
@mediascreenand(max-device-width:400px){
.column{
float:none;
width:auto;
}
‘叁’ 手机网站建站有哪些需要注意的
手机建站中最需要注意的就是整体的响应式布局，因为手机的屏幕大小是不同的，有些手机屏幕大，有些手机屏幕小，如何让网站能够在不同的屏幕之间完美的进行显示，这个是每个人都需要考虑的。
‘肆’ dw手机网站怎么布局
和pc端的网页差不多，网页大小控制在640px左右。也可以设置为100%，按比例来做。这样能手机整屏显示。
<metaname="viewport"巧绝content="width=device-width,initial-scale=1"/>
添加这个代码，表示网页不能放大，按1：1显示。孝含姿不会因为放大显示而，导致网页错位。注意字体大小要稍微大一老态点。
‘伍’ 如何设计手机网站
现在人人都离不开手机，手机功能从初的接打电话、收发短信到如今的智能网路服务，手机变成了一个移动的网路端，手机网站也成为了人们上网的重要聚到。那么设计者应该如何设计手机网站？
1、网站结构和布局
用户打开手机登录网站，先看到的就是网页的整体结构还有板块分布。如何让用户喜欢并且有耐心继续在你的网站看下去是一个关键。页面应该整体布局合理，让用户看到时不会感到杂乱。试想一下，如果网页排版混乱，各种新闻或者视频等乱糟糟的混在一起，谁看到以后都不想继续浏览，只想赶紧退出换别的网站。所以网站在结构上一定要清晰，让人看到的时候一目了然，种类划分明确，便于用户按喜好查找内容。
2、网站内容有特色
用户在浏览网站时，可能本身并没有什么计划想要看什么内容，或者只是习惯性的打开看一眼。这时网站应该把有创意有吸引力的内容做头条，这样用户本来只是点进来看一眼，看到新奇的内容后，会忍不住的继续浏览网站。
3、网站图片的大小适宜
很多用户在浏览网站时，如果网络速度不快，浏览图片时会出图比较慢或者直接无法显示。网站设计者应该注意使上传图片者控制图片大小，不要上传太大的图片，也不要上传模糊和分辨率很小的图片，不然的话用户可能会因为打不开图片而关闭页面
4、页面不宜过大
设计者应注意网页的页面大小不要超过20KB，页面如果太大会消耗用户更多的流量。
5、注意屏幕规格
手机一般都可以用横屏和竖屏两种方式浏览网页，设计者应注意横向和纵向的区别设计两种规格的尺寸。
‘陆’ 手机网站如何建设
pageadmin一样很方便的制作手机网站：
一、在站点管理里面新建一个手机分站，如下图：
‘柒’ 如何让网站自适应手机
一.允许网页宽度自动调整："自适应网页设计"到底是怎么做到的？
其实并不难。首先，在网页代码的头部，加入一行viewport元标签。
<metaname="viewport"content="width=device-width,initial-scale=1"/>
二.不使用绝对宽度由于网页会根据屏幕宽度调整激唤亏布局，所以不能使用绝对宽度的布局，也不链手能使用具有绝对宽度的元素。
三.相对大小的字体字体也不能使用绝对大小（px），而只能使用相对大小（em）。
四.流动布局（fluidgrid）"流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main{float:right;width:70%;}.leftBar{float:left;width:25%;}
五.图片的自适应（fluidimage）除了布局和文本，"自适应网页明神设计"还必须实现图片的自动缩放。
六、此外，企业借助建站宝盒搭建一个响应式网站就可以适应所有设备屏幕了，其中包括电脑、手机、Ipad等。
‘捌’ 如何做好手机网页设计
随着互联网科技的发展以及人们生活方式的改变，手机网站逐渐赶上PC网站，成为企业宣传推广以及用户阅读的的主要平台，因此也有越来越多的企业开始制作手机网站。不过，手机网页设计必须遵循移动端的设计原则，而不是盲目沿用电脑网站的设计规律，毕竟两者还是有很大区别的。
首先，移动端网页设计都需要考虑网络的问题。虽然现在的网络普及程度高，但是大部分用户还是利用手机流量来上网的，因此对手机网页的访问加载速度要求较高。如果用户在流量网页时遇到页面迟滞、视觉错位、信息不全等问题，用户体验就会大打折扣，因此要求网页内容尽量简洁明了，同时展现精准、有用、易用的菜单栏。
还有，因为手机端屏幕大小不一，如果想要保证所有人正常访问页面，维持内容的可读性，那么就需要我们在进行相关设计的时候，尽量控制文本的间距、颜色，着重突出页面的重点内容，让用户更容易看到自己想看到的内容,另外，一般手机中的电话、短信、推送等信息是无处不在的，用户在浏览网站时，注意力很容易就被这些弹出来的信息所吸引，因此网页的图标设计一定要高效，让用户在短时间内就知道网页的导航信息是什么、主要内容是什么，节省用户时间的同时，还为网站争取了成交的机会。
手机网站布局设计方法
1、手机网站的单页
手机网站建设的单页这个是存在于很多企业网站的内容，单页优化有着一定的好处，首先网站的单页是用HTML书写，并且完全静态化，这个是符合搜索引擎的，有利于优化，对搜索引擎友好。
这种页面的布局往往需要的是大气，简洁，直入主题。一般可以用来介绍公司以及公司的主要核心内容。
2、首页布局
手机网站建设的首页是一个网站的核心部分，浏览者首先看到的就是首页，然后才会看到内页，才会了解你的公司，只有首页有吸引力，才能留住浏览者浏览你网站的内容，那么首页的布局就很重要了。
首页需要突出网站的核心，展示公司的优势，尽显企业的特色，而且需要有主次之分，上下之分，因为浏览者的习惯是从上而下，从左而右浏览的。
3、内容页布局
手机网站建设的内容页就是网站的内容详细展示页面了，有的网站建设者没有太多注意的问题，手机网站建设者认为内容页根本不重要或是不是很重要，只要在后台把文章内容上传上去让其显示就可以了。
其实一些大网站的权重流量都是靠这些内容页撑起来的，我们每天更新文章显示的一个界面，这个页面的一个好的内容页能够给网站带来某一特定词的排名。
4、列表页布局
手机网站建设的列表页分为图片列表和文章列表页。图片列表页一般展示的是公司的案例或产品，一般图文布局展示就可以了。文章列表页展示的是公司的新闻或行业动态之类的文章，一般是新闻标题显示布局就可以了。
‘玖’ 最流行的四种移动端布局方式，看这一篇文章就够了
众所周知，pc端呢目前处于一种三家分晋，即三种内核（webkit，blink，gecko），当然算上马上要更换内核的IE那就是四个。而我们的移动端呢，那就是万余基于webkit了，所以各位进行移动端web开发时，只考虑webkit的适配就可纯察以了，怎么样，开不开心 ？
我们先蠢裤悉来看看什么是视口，视口就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口，他又可以分成一下四种
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端带乎页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
最标准的viewport设置
视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0
ps：注意二倍图或者三倍图问题
流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
父盒子开启display：flex后，默认为不换行，所以使用flex-wrap：wrap；使其换行
使用justify-content: space-around; 使其子盒子主轴间距平均分配
使用align-content: space-around; 使其子盒子侧轴间距平均分配
方案1
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③每一份作为html字体大小，这里就是50px
④那么在320px设备的时候，字体大小为320/15就是 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100 100像素的页面元素在 750屏幕下， 就是 100/ 50 转换为rem 是 2rem 2rem 比例是1比1
⑧320屏幕下， html字体大小为21.33 则 2rem= 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下 页面元素盒子等比例缩放的效果
总结：
①最后的公式：页面元素的rem值 = 页面元素值（px） / （屏幕宽度 / 划分的份数）
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者：页面元素的rem值 = 页面元素值（px） / html font-size 字体大小
方案2
1.less+rem+媒体查询
2.lflexible.js+rem
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分
超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
直接拿Bootstrap 预先定义好的样式来使用
修改Bootstrap 原来的样式，注意权重问题
学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果