Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css HTML从Windows更改为Mac_Css_Html_Operating System_Dimensions - Fatal编程技术网

Css HTML从Windows更改为Mac

Css HTML从Windows更改为Mac,css,html,operating-system,dimensions,Css,Html,Operating System,Dimensions,所以我写了一个投资组合网站,但我有一些麻烦。我在Windows7上写了这个网站,但是在家里我用的是mac电脑。windows电脑的屏幕是15英寸,mac电脑的屏幕是13英寸,分辨率各不相同。基本上,问题是我有一个侧边栏div,当在mac上查看时,它会向下移动,而在windows机器上查看时,它就是我想要的位置。我已经包括了一些屏幕截图,这样你就知道了。第一个在Windows7上,第二个在MacOSX上 farm8.staticflickr.com/7373/8753141625_140ecbb

所以我写了一个投资组合网站,但我有一些麻烦。我在Windows7上写了这个网站,但是在家里我用的是mac电脑。windows电脑的屏幕是15英寸,mac电脑的屏幕是13英寸,分辨率各不相同。基本上,问题是我有一个侧边栏div,当在mac上查看时,它会向下移动,而在windows机器上查看时,它就是我想要的位置。我已经包括了一些屏幕截图,这样你就知道了。第一个在Windows7上,第二个在MacOSX上

farm8.staticflickr.com/7373/8753141625_140ecbb3ce_b.jpg(在mac上查看)

我原来改变了一些事情。下面是代码,然后我将解释我已经尝试过的内容:

<div id="hello" class="container clearfix scroll-content">

<h1>Hello!</h1>

<h2>Allow me to Introduce myself:</h2>
<h2>My Name is <span class="cas">Dom Greenslade</span></h2>
<h3><span class="experience">5</span>Years of Web Development Expereince</h3>
<h3><span class="me">Bachelors Degree</span> in <span class="me">Computer Science</span> Specialising In Programming and Scripting</h3> <br>
<h3>Born, Bred and Reside in: Poole, Dorset</h3><br>
<h3>Currently employed by: Foray Motor Group as Web and Ecommerce Developer</h3>   <br>


<div class="process">
How it's done

<img src="images/process2.png" height="460px">
</div>

</div>
要查看完整的代码,请告诉我,我可以在这里复制完整的网站,或者您可以在www.domgreenslade.webuda.com上查看开发网站

以下是我尝试过的: 将位置更改为绝对位置 向右浮动并删除该位置。 将某些值更改为百分比,而不是px

这就是有趣的地方。 我抓紧稻草,想看看chrome(我设计网站的浏览器)中的inspect元素发生了什么,甚至标题的大小也与这两个操作系统不同。它们是不同的分辨率,但即使我在Macbook上更改分辨率,侧边栏(过程)仍保持不变。 第一个在Windows上,第二个在Mac上。注意h1的大小差异吗?46px和43px取决于操作系统?我该如何应对?它真的把网站搞砸了

(http://farm4.staticflickr.com/3707/8754266312_7921962613_b.jpg在Mac上查看

现在我真的被卡住了,我错过了什么或者我做错了什么?非常感谢你的帮助


非常感谢

网络大部分都有标准,但是每个浏览器都会以不同的方式中断这些标准以及人们在计算机上的个人设置,例如屏幕分辨率和字体设置

我要做的是,设置一个液体最大最小布局,以纠正布局宽度,尝试和适应所有浏览器,并帮助其他人获得屏幕分辨率

body{
   width:95%; max-width:1200px; min-width:960px; <!-- These numbers you would have to adjust -->
}
正文{
宽度:95%;最大宽度:1200px;最小宽度:960px;
}
对于不同浏览器的h1大小,我也会使用百分比或小、中、大、x-large进行调整,并始终将字体大小设置为px

h1{
 font-size:300%; <!-- 100% is normal size font so we are multiplying by 3 to be 3x larger-->
}
h1{
字体大小:300%;
}
继续调整它们,你会得到你喜欢的东西


当你测试这些时,我会在你所有的浏览器中尝试它们,以确保你在晚上睡得好。

或者,你可以使用CSS重置文件来平衡跨浏览器中的不一致性

一个广泛使用的CSS重置文件是Meyer的CSS重置。

请注意,现在将CSS重置文件应用到代码中可能会弄乱一些其他内容(例如,默认情况下粗体不会变为粗体)

h1{
 font-size:300%; <!-- 100% is normal size font so we are multiplying by 3 to be 3x larger-->
}