css的浏览器兼容性

-3

我是UI开发世界的新手。现在我正在使用HTML和CSS来开发布局。我使用谷歌浏览器（因为它是一个非常好的浏览器，并且从我的角度来看它是最好的）来调试我的代码，但是我只是下载了Firefox，看看我的设计会是什么样子的（我在想的非常多没有什么会改变），只有当我发现我的设计看起来很糟糕，而且我所经历的所有事情都与Firefox不兼容时，才会发生错位。css的浏览器兼容性

我需要一个具备该领域专业知识的人告诉我如何正确理解浏览器之间的这种不兼容性（一些专业技术），以及我现在应该为当前设计做什么以及在开发其他网站时应该做什么？

PS 这个问题可能没有一些真正的英语作为我的背景，但我向你保证，我不是要求而不是礼貌地问，这就是它在我所在地区的声音。谢谢

更新

来源

2016-07-03 MaryBaker

跨越不同broswers是测试peformance的最好方法。 ..在不同的浏览器上测试。您可能希望在Chrome，IE 11和Safari上兼容。移动设备完全是另一回事。 –

@Tim Biegeleisen因此，这些是最常用的浏览器（Chrome，IE 11和Safari），我需要全部使用它们并测试我的所有代码？ – MaryBaker

使用像[bootstrap]（http://getbootstrap.com/）这样的完整样式框架可能会有帮助。可以查看现成的模板，这些模板在各种浏览器中通常看起来相同，而使用引导程序构建的所有站点中的最好的模板都是最先移动的。 –

由于浏览器都是由主要不同的人开发的，因此总会遇到兼容性问题。

有两个步骤我能想到的，当谈到防止这种问题：

使用CSS复位器。这意味着一个样式表包含一组用于将所有项目设置为相同起始值的CSS（即，Chrome在列表项中有30px填充，firefox有35px，但css resetter告诉他们两个都有30px填充 - 仅举一个例子）。有关CSS重置的更多信息，请查看此问题：CSS reset - What exactly does it do?
正确地为您的CSS添加前缀。浏览器以不同的方式实现属性，因此-webkit-transition:0.2s;在早期版本的Chrome中工作，Firefox只有-moz-transition:0.2s的实现，直到它成为transition:0.2s应该是可接受的语法的标准。有很多的工具，可以提供帮助的，像Autoprefixer，或pleeease.io

关于移动响应性，关键是要避免使用许多固定宽度的元素（即1,024像素的主容器），或具有media queries和适应的固定尺寸到使用媒体查询的特定显示尺寸。
互联网的知识库可以帮助你真正了解更多关于这一点，但如果你只是想尝试一下，你可以在这太问题查看一些流行的媒体查询：Media Queries: How to target desktop, tablet and mobile?

来源

2016-07-03 01:05:58

你将不得不学习，因为你去，先从简单的事情&确保你有一个良好的基础。有很多高级的CSS3动画，转换为&转换，因为CSS3变得更加强大。查看“Can I Use”查看哪些浏览器支持您的CSS。响应式设计基于媒体查询（检查屏幕尺寸）&使用百分比而不是px，因此设计可以根据设备而改变。另外MDN是一个很好的参考工具，它也注意到浏览器的兼容性。

来源

2016-07-03 00:58:07

你问题的第二部分：
编写代码，以使您的网站在头部兼容
相应修改“1.0”的一部分。

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

来源

2016-07-03 01:04:25

您是否会详细说明“相应地修改”1.0“部分”，我知道这个元标签适用于不同的设备，但是如何修改初始缩放工作以及基于“1.0”更改的内容？ – MaryBaker

一个好的做法是将填充边距设置为0和使用您的样式表的第一行箱尺寸复位这样

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    }

这个浏览器的布局将帮助你控制你的网站布局好一点

来源

2016-07-03 01:12:51

css的浏览器兼容性

回答

相关问题