我目前正处于准备我的艺术和设计网站 (www.jamieansell.com) 的最后阶段，我正在使用 One% CSS 网格来保存图形设计和艺术作品页面上的预览图像。
此设置在 Google Chrome 上运行良好，但我最近发现在 Safari 和 Android 上查看网站时，网格被拉伸和扭曲。
我已经对 CSS 进行了摆弄，但无济于事。下面是相关的CSS：
Common columns definitions
*/
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
float: left;
margin: 0%; 0 0 0;
}
.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
margin: 0;
}
.col1 { width: 5.5%; margin: -3.1%; }
.col2 { width: 16.8%; margin: -0.1%; }
.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
width: 100%;
height: 100%;
display: block;
}
如果需要，我还可以根据要求发布页面标记。
非常感谢您的帮助！
杰米
<style>
body {
margin-top: 1px;
}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
background: #ffffff;
color: #000;
margin-bottom: 0px;
text-align: center;
padding: 0px 0;
}
@media all and (max-width: 768px) {
.onerow {
margin: 0px 0 100px;
}
}
.col13 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col101 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col111 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col121 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col21 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col31 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col41 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col51 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col61 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col71 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col81 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col91 { background: #801255;
color: #fff;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col14 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col102 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col112 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col122 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col22 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col32 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col42 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col52 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col62 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col72 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col82 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
.col92 { background: #ffffff;
color: #000;
margin-bottom: 1px;
text-align: center;
padding: 1px 0;
}
</style>
</head>
<body>
<br></br>
<div class="onepcssgrid-1200">
<div class="col2"><a class='gallery' href="images/Lucid.jpg" title=""><img src="images/sitsol-prev.jpg"></a></div>
<div class="col2"><img src="images/domin-prev.jpg"></div>
<div class="col2"><a class='gallery' href="images/Lucid.jpg" title=""><img src="images/glass-prev.jpg"></a></div>
<div class="col2"><a class='gallery' href="images/Pilot-Light-(Detail).jpg" title="Read, Test & Reflect (2006)"><img src="images/rtr-prev.jpg"></a></div>
<div class="col2"><a class='gallery' href="" title=""><img src="images/gd-inst.jpg"></a></div>
<div class="col2"><a class='gallery' href="images/Carbon.jpg" title="College of Biomedical Science (2008)"><img src="images/cobs-prev.jpg"></a></div>
<div class="col2"><a class='gallery' href="" title="Truth"><img src="images/truth-prev.jpg"></a></div>
<div class="col2"><a class='gallery' href="" title="Marta Cots School of English (2013)"><img src="images/mc-prev.jpg"></a></div>
<div class="col2"><a class='gallery' href="images/Reel1.jpg" title="Reel1"><img src="images/reel-prev.jpg"></a></div>
<div class="col2"><a class='gallery' href="images/Reel1.jpg" title="Join the AAPT"><img src="images/join-prev.jpg"></a></div></div>
</body>
</body>