响应式移动版网站上的 HTML
[英] HTML on a responsive mobile version of site
本文介绍了响应式移动版网站上的 HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的 iPhone 上为页面底部的网站的几个小时部分苦苦挣扎.桌面站点的运行时间看起来不错，但移动版本看起来很糟糕.您可以通过将水平浏览器缩小到小于 968px 左右来查看它.时间之间只有巨大的空间.
我目前在我的 wordpress 文本小部件中使用以下代码.我们正在努力使其保持一致.
任何帮助将不胜感激.
<p><strong></strong><div class="flex_column av_one_fourth first el_before_av_one_half">星期一</div><div class="flex_column av_one_fourth el_after_av_one_fourth">早上 6 点 - 晚上 10 点
<div class="flex_column av_one_fourth first el_before_av_one_half">星期二</div><div class="flex_column av_one_fourth el_after_av_one_fourth">早上 6 点 - 晚上 10 点
<div class="flex_column av_one_fourth first el_before_av_one_half">星期三</div><div class="flex_column av_one_fourth el_after_av_one_fourth">早上 6 点 - 晚上 10 点
<div class="flex_column av_one_fourth first el_before_av_one_half">星期四</div><div class="flex_column av_one_fourth el_after_av_one_fourth">早上 6 点 - 晚上 10 点
<div class="flex_column av_one_fourth first el_before_av_one_half">星期五</div><div class="flex_column av_one_fourth el_after_av_one_fourth">早上 6 点 - 晚上 10 点
<div class="flex_column av_one_fourth first el_before_av_one_half">星期六</div><div class="flex_column av_one_fourth el_after_av_one_fourth">上午 8 点 - 晚上 10 点
<div class="flex_column av_one_fourth first el_before_av_one_half">星期日</div><div class="flex_column av_one_fourth el_after_av_one_fourth">上午 8 点 - 晚上 8 点
解决方案
首先，按照建议你应该清理你的 HTML，也许从基础开始.
首先，您不能在段落标签内放置大量 div.您会在您的网站上看到，您的浏览器会自动关闭一个空的
标记.
其次，我会将每一行放入它自己的容器 div 中，然后为每一天和其中的时间放置一个 div.
<div>星期一</div><div>早上 6 点 - 晚上 10 点</div>
<div><div>星期二</div><div>早上 6 点 - 晚上 10 点</div>
等等
现在，您可以为每一行指定一个类，并将该样式设置为 100% 宽度.然后，里面的每个div，可以设置为inline-block，宽度为50%.
<div class="day">星期一</div><div class="times">早上 6 点 - 晚上 10 点</div>
.物品 {显示:块；宽度:100%；}.item .day, .item .times {显示:内联块；宽度:49.9%；}
这是我创建的一个简单示例，展示了媒体查询在这种情况下的工作方式，以及命名 div 和正确标记.
http://jsfiddle.net/jyyg5f62/
CSS 断点是 736px，这是 iPhone 5s(和类似)尺寸的纵向模式屏幕的宽度.当浏览器检测到这个宽度时，新的 CSS 样式就会接管.在这种情况下，它将内联块交换为块，因此每天和时间都在自己的行上.当视口展开时，它们会并排显示.
I'm struggling with this bit of HTML on my iPhone for the hours portion of the site at the bottom of the page. The desktop site's operation hours looks great, but the mobile version looks terrible. You can view it by reducing your horizontal browser to less than 968px or so. There are just huge spaces in between the times.
I'm currently using the following code within my wordpress text widget. We are trying to keep it aligned.
Any help would be much appreciated.
<p>
<strong></strong>
<div class="flex_column av_one_fourth first el_before_av_one_half">Monday</div>
<div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
<div class="flex_column av_one_fourth first el_before_av_one_half">Tuesday</div>
<div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
<div class="flex_column av_one_fourth first el_before_av_one_half">Wednesday</div>
<div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
<div class="flex_column av_one_fourth first el_before_av_one_half">Thursday</div>
<div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
<div class="flex_column av_one_fourth first el_before_av_one_half">Friday</div>
<div class="flex_column av_one_fourth el_after_av_one_fourth">6 AM - 10 PM</div>
<div class="flex_column av_one_fourth first el_before_av_one_half">Saturday</div>
<div class="flex_column av_one_fourth el_after_av_one_fourth">8 AM - 10 PM</div>
<div class="flex_column av_one_fourth first el_before_av_one_half">Sunday</div>
<div class="flex_column av_one_fourth el_after_av_one_fourth">8 AM - 8 PM</div>
</p>
解决方案
Firstly, as suggested you should clean up your HTML, and maybe start from basics.
Firstly, you can't place loads of divs inside a paragraph tag. You'll see on your website, you'll have an empty
tag that's been automatically closed by your browser.
Secondly, I would put each line into it's own container div, and then place a div for each day, and times inside that.
<div>
<div>Monday</div>
<div>6am - 10pm</div>
</div>
<div>
<div>Tuesday</div>
<div>6am - 10pm</div>
</div>
etc
Now, you can assign each line a class, and set that styling to 100% width.
Then, each of the divs inside, you can set to inline-block, with a width of 50%.
<div class="item">
<div class="day">Monday</div>
<div class="times">6am - 10pm</div>
</div>
.item {
display:block;
width:100%;
}
.item .day, .item .times {
display:inline-block;
width:49.9%;
}
Here's a quick example I created showing how media queries work in this case, along with naming your divs, and having your markup correct.
http://jsfiddle.net/jyyg5f62/
The CSS breakpoint is 736px which is the width of an iPhone 5s (and similar) sized screen in portrait mode. When the browser detects this width, the new CSS styling takes over. In this case, it swaps the inline-block for block, so each day and time are on their own line. When the viewport expands, they appear side by side.
这篇关于响应式移动版网站上的 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
