Question

我试图在段落内的文本之前插入一个超棒的字体图标，但是当我将其复制为智能手机时，该图标就会与文本混合在一起。如果我将填充/边距或类似的内容放在智能手机视图上，效果会很好，但在桌面图标上却会显示文本。如何在不更改最后一个的情况下使智能手机变得像桌面视图？

以下是有关代码的一些想法：

<header>
  <h1>This is a text <br> reference <b>33131</b></h1>
  <h3>Something Here</h2>
  <p>
    <b class="b_title">Field:</b>
    <br>
    Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="fas fa-compass fa-fw" aria-hidden="true"></i> Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="fas fa-compass fa-fw" aria-hidden="true"></i> Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="far fa-calendar fa-fw" aria-hidden="true"></i> Something Here
  </p>
  <p>
    <b class="b_title">Field:</b>
    <br>
    <i class="far fa-clock fa-fw" aria-hidden="true"></i> Something Heredays
  </p>
</header>

<ul class="progress">
  {% for move in object.moves %}
    {% if loop.first %}
      <li class="progress__item progress__item--active">
    {% else %}
      <li class="progress__item progress__item--completed">
    {% endif %}
      <p class="progress__info"><i class="far fa-calendar fa-fw" aria-hidden="true"></i><b>Something Here</b></p>
      <p class="progress__info"><i class="fas fa-compass fa-fw" aria-hidden="true"></i><b>Something Here</b></p>
      <p class="progress__info"><b>Field:</b> Something Info Here</p>
      <p class="progress__info"><b>Field:</b> Something Info Here</p>
      <p class="progress__info"><b>Field:</b> Something Info Here</p>
      <p></p>
    </li>
  {% endfor %}
</ul>

https://jsfiddle.net/aipim/5q978fym/

我如何使用Jinja2，它将无法编译。但是下面我将图像插入以便更好地理解。

桌面版本：

移动版本：

Answer 1

经过大量的思考和阅读后，我向一位朋友求助，该朋友发现它的发生是因为必须在标头中使用视口元标记。

dotnet --info

最后，它成功了！当我在jsfiddle上创建示例时，我的模板必须继承自其标头。

Answer 2

您可以为移动设备添加媒体查询，这不会影响您的桌面版本，

package main

import (
    "fmt"
    "github.com/zserge/lorca"
    "net/url"
)

var inputform string = `
<html>
    <body>
        <form action="/action_page.php">
            <input type="text" name="username" id="username">
            <input type="text" name="address" id="address">
            <input type="submit" onclick="golangfunc()">
        </form>
    </body>
</html>
`

func main(){
    ui, _ := lorca.New("data:text/html,"+url.PathEscape(inputform), "", 480, 320)
    ui.Bind("golangfunc", func() {
        username := ui.Eval(`document.getElementById('username').value`)
        address := ui.Eval(`document.getElementById('address').value`)

        fmt.Println(username, address)
    })
    defer ui.Close()
    <-ui.Done()
}

HTML文本和Font Awesome图标之间的间距

2 个答案: