手机是不是不支持css3三维动画

你好，这个问题应该是css兼容性问题导致的。

目前绝大部分移动浏览器还不支持animation这个属性，而是支持-webkit-animation（这类加前缀的）属性，在问题中：

ih { background: #000; opacity:3;width: 90%; height: 25%; margin-left:-45%; position: absolute;bottom: 120px;left:50%;

animation:ih 2s;

}

只设置了，animation: ih 2s; 而没有写兼容的 -webkit-animation: ih 2s;所以动画在移动浏览器中就不动了。你可以试下将上面代码改为：

ih { background: #000; opacity:3;width: 90%; height: 25%; margin-left:-45%; position: absolute;bottom: 120px;left:50%;

-webkit-animation:ih 2s;

-moz-animation:ih 2s;

-ms-animation:ih 2s;

-o-animation:ih 2s;

animation:ih 2s;

}

无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。

首先，在网页代码的头部，加入一行viewport标签

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

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为10，即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。

其次：网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。当然可以用width:auto;

第三，流动布局

left{

float: left;

width: %;

}

第四，选择加载css

这是自适应的关键部分

abc{ height:300px; border:1px solid #000; margin:0 auto} 

@media screen and (min-width: 1201px) { 

abc {width: 1200px}  

} 

/ 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 / 

 

@media screen and (max-width: 1200px) { 

abc {width: 900px}  

} 

/ 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 / 

 

@media screen and (max-width: 901px) { 

abc {width: 200px;}  

} 

/ 设置了浏览器宽度不大于901px时 abc 显示200px宽度 / 

 

@media screen and (max-width: 500px) { 

abc {width: 100px;}  

} 

/ 设置了浏览器宽度不大于500px时 abc 显示100px宽度 / 

需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。

第四，自适应

img { max-width: 100%;}

老版本的IE不支持max-width，所以只好写成：img { width: 100%; }

筚五、采用相对字体大小

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

这里最重要的，是第三条和第四条，也就是采用流动布局和css选择加载。祝你好运！

一、导航栏位置

在iOS上，导航栏是指显示在应用程序顶部，位于状态栏下方的容器区域，层级应高于当前页面内容。在安卓上，Google公司在MaterialDesign中也赋予了它同样的定义，但是却给了它另一个名称，顶部应用栏（TopAppBar）。

导航栏是用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用。很多人疑惑，为什么标签栏不能叫做底部导航？因为标签栏是构架了多个屏幕之间平级页面的内容切换，和导航的定义没有任何关联。

二、导航栏UI设计规范与实际项目的应用

基本的导航栏容器一般承载的信息可能会有：标题；导航按钮；内容控件按钮；其他控件（比如搜索栏、分页标签或分页控件等）；千万别忘了还有分割线。

1、导航栏标题设计规范

2017年以前的移动端规范下的导航栏还是循规蹈矩的，样式单一。但随着iPhoneX等一系列全面屏手机相继问世后，移动设备在屏幕高度上有了进一步的扩展，界面设计在一屏内的发挥空间也随之增加。iOS11发布后，大标题导航栏设计风格兴起，随后被引入平台规范。

于是现在iOS与MaterialDesign在导航栏上也都定义了两种导航栏标题规范：常规标题与大标题。

常规标题是指在高度为88px（iOS@2x下）的导航容器中，居中放置一个当前页面的标题。标题字号一般为34px-38px（34px为iOS标准规范，但实际项目中可以在尽量在不小于34px标准的情况下根据设计需求确定）。

大标题是将导航栏栏高增加到192px（iOS@2x），保留高度为88px的导航容器来承载内容控件按钮，将标题下坠居左。iOS的标准规范定义大标题的字号为68px。但由于英文有大小写区分，在视觉上有一定的层次表现，而中文因为缺少一定的层次结构，并且相同字号的中文视觉大小大于英文，所以大多数时候我们在进行大标题设计时，会适当缩小，一般为56px-64px居多。

大标题导航栏的优点毋庸置疑，页面留白更多，呼吸感更强，大气现代、更高，因为页面标题巨大，能够帮助用户快速确认当前所处位置；采用统一的大标题，让页面布局风格快速统一。但缺点也显而易见，因为增加了导航栏的高度，导致屏幕利用率降低，一些通过广告变现或更加注重一屏内内容呈现的应用便中和了常规导航与大标题导航的优缺点，进行了风格改进。

2、导航按钮及内容控件按钮设计规范

iOS规定导航按钮位置仅能用于放置返回按钮，可以添加一个层级的面包屑，帮助用户有效地明确当前页面层级；MaterialDesign中，则不仅可以放置返回按钮，还另有作用，菜单图标-用于打开导航抽屉或者关闭图标-关闭工具栏。

与iOS的定义有着天壤之别，iOS非常明确地赋予了工具栏的定义，并且将导航栏和工具栏（Toolbars）彻底地分离开，典型案例就是Safari。在内容控件上iOS与MaterialDesign也大相径庭，MaterialDesign不去限制你的内容控件多少，因为它提供了溢出菜单，并可以根据屏宽的变化，自适应释出和收纳溢出菜单中的控件。

而iOS则规定我们，要给内容控件按钮足够多的空间，必要的时候，隐藏导航栏标题也未尝不可。真实的项目中我们经常为了快速落地，会存在一稿适配双平台的情况。这时候我们应该遵从哪一个平台的规范呢？答案是：许多大厂的做法已经向我们验证，规范不分家。

在iOS诸多的应用中溢出菜单早已普及，尽管这是MaterialDesign提出的设计理念。虽然国内遵从MaterialDesign进行Android应用设计的情况相对较少，但它提供的设计理念与方案却并不局限在安卓平台。

3、分割线设计规范

分割线只是一种体现形式，我想要表达的是，别忘记区分导航栏与内容界面的视觉层级关系。MatetialDesign提醒我们，顶部应用栏可以与内容位于同一高度，但滚动时，请增加导航栏的视觉高度，让内容在其后方滚动。而iOS则默认采用了背景模糊的方式区分了导航栏与内容区域的层级关系。

4、其他控件

关于其他控件，iOS只在规范中提及到了分页控件。苹果设计师考虑到部分场景在当前页面中还存在信息层级结构划分，此时建议可以在导航栏中使用分段控件。

国内的应用程序早已将导航栏容器的作用发挥到极致，基于导航栏层级始终高于内容区域的特性，我们通常可以将分段控件、分页标签、搜索栏等等用户可能随时使用的工具放在导航栏中。

导航栏用于构架当前屏幕的内容，阐述当前屏幕的状态，并且起到连接父子级页面层次结构的作用，在一个页面发挥着重要作用，设计好导航栏不仅仅是视觉上的工作，表现的方式、承载的按钮与组件、滚屏时的组合操作还能给用户带来极大的体验增益。因此掌握好导航栏的设计技巧对一名设计师来说尤为重要！

搜索框

在视觉上以下两点比较需要注意：

1、放大镜图标

使用图标。我不想对其会增加找到搜索栏的速度进行强调。越简单越好。越少的细节能够保证用户能快速地扫视它。虽然，只有一个图标本身而没有一个可输入的容器或按钮实际上会使搜索变得更加困难。人们通常会意识到，一个放大镜图标显示的是一个搜索工具，即使它没有标签。但是糟糕的是，只有一个图标则会使搜索更加困难。

2、一个真实的搜索按钮

并非每个人都是学会在网上冲浪的千禧一代，这意味着，并不是每个人都知晓在他们输入查询之后需要按下Enter键。在搜索输入旁边添加一个实际的按钮将帮助用户确认他们的下一步行动，进而减少用户所需的认知负荷。

输入特色：

确保可输入的长度不会太短。诺曼集团的相关研究表明，一个能输入27个字符的输入框，可以满足90%的用户需求。

可以输入5个字符与26个字符的搜索框的简单例子

明确占位符

在输入的占位符文本中使用适当的副本是很重要的，通常用户可以通过搜索得到提示。这会确保他们知道要搜索什么，也不会因为写不明白所要查询的问题而感到失望且无措。最近，web工具允许人们轻松地添加提示作为HTML5中的占位符来实现这一点。

添加占位符可以帮助过滤用户查询行为

需要加一句

<metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

然而这只是适应手机的前提条件，它告诉手机适配，这是一个响应式网站，然后需要写css去重置样式，这个需要专业的前端知识。

或者参考步骤一步步尝试

网页链接

不是随便添加句话就可以自适应手机屏幕的，没这么简单。如果要自适应手机，是要用到rem单位的，然而rem又要搭配媒体查询来使用。

例如你的设计稿如果是宽720px的话，那你的文字就要以原始大小除以1125，例如16px的话就要16/1125这样来计算。我的意思是不用像素，用rem,因为px是写死的，rem是可以适应手机端的（包括盒子的宽高都是要以rem来计算）。另外，用之前要把下面这段代码放到你css文件里：

@media only screen and (max-width: 1080px) {

html, body {

font-size: 16875px;

}

}

@media only screen and (max-width: 960px) {

html, body {

font-size: 15px;

}

}

@media only screen and (max-width: 800px) {

html, body {

font-size: 125px;

}

}

@media only screen and (max-width: 720px) {

html, body {

font-size: 1125px;

}

}

@media only screen and (max-width: 640px) {

html, body {

font-size: 10px;

}

}

如果宽是720，就除以它相对应的那个值，如果是宽960，就除以960相对应的那个值，这么说应该可以明白吧。

纯手打，望采纳~

具体步骤如下：

1、输入position:fixed; top: 0; left: 0;使整个div固定在屏幕的最上方和最左方。

2、输入width:100%;height:100%; min-width: 1000px;这个可以适合div的高度和宽度，而min-width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变。

3、输入background-size: cover;-webkit-background-size: cover;-o-background-size: cover;使随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。

4、输入background-position: center 0;使的位置，居中，靠左对齐。

你所说的内链是指在一个css文件中引用另一个css文件吗？

可以这样写

@import url;

@import url list-of-media-queries;

这是用法介绍

@import