Question

我为移动设备创建了流畅的css。这是我的网站Click here

对于较小宽度的css更改，您可以通过减少witdh从浏览器中看到它。问题是，在谷歌浏览器上，我的文字很好地包围了图像，但是当我从我的iPhone访问该页面时，文本低于img。浮动属性在iOS上运行不正常吗？

移动CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*!!!!!!!!!!!!!!!!!!Style BEGINS!!!!!!!!!!!!!!!!!!!!*/
body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    line-height: 120%;
   font-weight: 300;
    color: black;
    list-style:none;
    width: 100%;
    height: 100%;
}
h1
{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 200%;
    margin-bottom: 5px;
}

h2
{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 100%;
    margin-bottom:5px;

}
h3
{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 75%;
}
/*Wrapper of the whole mobile website*/
#wrapper
{   
    width: 100%;
    height: 100%;
    position:absolute;
}

/*Top buttons*/
#top_buttons
{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-transform: uppercase;
    width: 100%;
}
#top_buttons a
{
    text-decoration: none;
    color: white;
    background: black;
    width: 100%;
    display: inline-block;
    letter-spacing: 0.2em;
    line-height: 2em;
    padding: 0 0 0 10px;
    bottom: 0;
    border-bottom: grey solid 1px;
}

#top_buttons li:last-child
{
    border: none;
}
#paperbox
{
position:relative;
height: 100%;
width: 100%;
}

#main_sliding_pictures
{
float:right;
margin: 5px 5px 5px 5px;
}

#textwrapper
{
    padding: 15px 5px 5px 10px;
    letter-spacing: 0.1em;
}


.slider {
float:right;
  margin: 15px 5px 5px 25px;
  width: 183px; /* Update to your slider width */
  height: 183px; /* Update to your slider height */
  position: relative;
  overflow: hidden;
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}

.slider li {
  display: none;
  position: absolute; 
  top: 0; 
  left: 0; 
}


#icons
{
    float:bottom;
}


#icons li
{
    display: inline-block;
    padding: 0 0 0 10px;    
}

#icons a
{
    color: black;
    text-decoration: none;
}

#goUp
{
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    width: 100%;
}
#goUp a
{
    text-decoration: none;
    color: white;
    background: black;
    width: 100%;
    display: inline-block;
    letter-spacing: 0.2em;
    line-height: 2em;
    padding: 0 0 0 10px;
    bottom: 0;
}

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=320">
        <title>Home page</title>
        <meta name="keywords" content="Homepage">
        <meta name="description" content="Homepage">
        <meta name="author" content="Conrad Chamerski">
        <link rel='stylesheet' media='screen and (min-width: 320px) and (max-width: 480px)' href='css/narrow.css' />
        <link rel='stylesheet' media='screen and (min-width: 481px) and (max-width: 768px)' href='css/narrow.css' />
        <link rel='stylesheet' media='screen and (min-width: 769px)' href='css/wide.css' />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript">


</script>
    </head>

    <body>
        <div id="wrapper">
            <nav id="top_buttons">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="Pages/Projects.html">Project</a></li>
                    <li><a href="Pages/Contact.html">Contact</a></li>
                </ul>
            </nav><!--end primary_nav-->

        <div id="paperbox" class="boxcontainer">
            <div id="main_sliding_pictures">
    <ul class="slider">
        <li>
   <img src="images/maface.jpeg" height="183px" width="183px" />
 </li>
 <li>
   <img src="images/ProjectPictures/elwirebike.jpg" height="183px" width="183px" />
 </li>
 <li>
   <img src="images/ProjectPictures/monitor2.jpg" height="183px" width="183px" alt="HELLO"/>
 </li>
 <li>
   <img src="images/ProjectPictures/projectsmall3.png" height="183px" width="183px" align="ITS WORKING!!!" />
 </li>
</ul>
            </div>

            <div id="textwrapper">
                <h1>
                    About me
                </h1>
                <h2>
                    Prospective electrical engineer from Concordia University. My educational interests span from programming to electronics. My hobbies are sports, technology and philosophy.
                </h2>
                <div id="rating"></div>
            </div><!--end textwrapper-->

            <div id="icons">
                <ul>
                    <li><a href="mailto:conradchamerski@gmail.com">
                    <img src="/images/logos/google.png" width="15px" height="15px">conradchamerski@gmail.com</a></li>
                    <li><a  href="http://www.linkedin.com/in/conradchamerski/">
                    <img src="/images/logos/linkedin.png" width="15px" height="15px">Linkedin</a></li>
                    <li><a  href="https://twitter.com/ConradChamerski">
                    <img src="/images/logos/twitter.png" width="15px" height="15px">Twitter</a></li>
                    <li><a href="http://stackoverflow.com/users/1631092/conrad-c">
                    <img src="/images/logos/stackoverflow.png" width="15px" height="15px">Stackoverflow</a></li>
                </ul>
            </div><!--end icons-->



    </div><!--end paperbox-->
            <div id="goUp">
            <a href="#home">Top</a>
        </div><!--end goUp-->
  </div><!--end wrapper-->

    <!--<footer>Copyright Conrad Chamerski 2013 &#169;</footer>
    -->


    <script src="js/javascript.js"></script>
  </p>
</body>
</html>

Answer 1

它可以工作，但问题是iphone屏幕较小320会破坏......

..在我看来，这对你的iOS iphone版本看起来会更好：

enter image description here

将图像包装在iPhone上会使其太过于突兀（过于紧张和丑陋）......我在这里所做的是媒体查询我给了h1（关于我）

@ media =“screen and（max-width：480px）and（min-width：320px）：

#textwrapper h1  {clear: both; padding: 12px 0;}

以及图片（ .slider ）我将浮动：关闭并修复了填充

这对我来说效果更好，如果你想要更加光滑，你可以使图像100％和高度自动，这样它在iOS上看起来会更好（由你决定）。

文字不包围iPhone上的浮动图像

1 个答案: