Question

我在下面做了一个标志设计。在大屏幕上它可以正常工作但是当我减小窗口大小时，徽标的右侧会被切断。我希望它不会被切断，而是用窗口调整大小。我可以在这里使用媒体查询，但我觉得我在这里遗漏了一些东西。有什么想法吗？

＆＃13;

#back {
  background: white;
  color: #fff;
  padding-top: 150px;
  overflow: hidden;
}
#back .title {
  font-size: 7em;
  color: #074f66;
  margin-top: 0;
}
#back .title .highlight {
  color: #eebf3f;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section id='back'>
  <div class="col-md-5 col-sm-4 col-xs-12">
    <div class='text-center'>
      <h2 class="title">my<span class="highlight">Logo</span></h2>
      <div class="bottom-spacer">
      </div>
    </div>
  </div>
  <!--//col-->
</section>

＆＃13;

Answer 1

您可以检测手机并在需要时手动增加尺寸

Mobile Device Detection in asp.net

How do I detect a mobile browser in a .NET MVC3 application

Answer 2

NOP。您只有两个选项：

1）JS

2）媒体查询

Answer 3

只需使用媒体查询就可以在任何想要查看更改的断点处更改任何规则。

见MDN Using Media Queries＆amp; @Media以及Bootstraps默认设置：Bootstrap Media Queries。

CSS示例

txtDisplay.Text = "Return/" + "Receipt No:" + Return_Form.setalueforText011;
label1.Text = Return_Form.setalueforText011;
OleDbConnection VCON = new OleDbConnection(@"Provider=Microsoft.ACE.OLEDB.12.0;Data Source=D:\Restaurant.accdb");
DataSet dsa = new DataSet();
DataTable dt = new DataTable();
dsa.Tables.Add(dt);
OleDbDataAdapter da = new OleDbDataAdapter();
da = new OleDbDataAdapter("SELECT [Column1],[Column2],[Column3] from [Total] Where [Receipt No] =  " + label1.Text + "", VCON);
da.Fill(dt);
for (int i = 0; i < dt.Rows.Count; i++)
{
    // Create and initialize a new tblProduct from the datatable row
    tblProduct current = new tblProduct();
    current.productName = dt.Rows[i]["Column2"].ToString();
    current.productPrice = Convert.ToDecimal(Math.Round(Convert.ToDecimal(dt.Rows[i]["Column1"].ToString())));

    // Add to your list of products
    products.Add(current);

    // This line is wrong because you overwrite the value at each loop
    label3.Text = dt.Rows[i]["Column3"].ToString();

    // Sum the price of the current tblProduct
    Total += (decimal)current.productPrice;
}
// Outside the loop update your total label
textBox59.Text = "Rs: " + String.Format("{0:}", Total+".00");
VCON.Close();

工作示例：

＆＃13;

@media (max-width: 767px) {
  .title {
    font-size: 4em;
    color: red;
  }
}

＆＃13;

.title {
  font-size: 7em;
  color: #074f66;
  margin: 0;
}
.title .highlight {
  color: #eebf3f;
}
@media (max-width: 767px) {
  .title {
    font-size: 4em;
    color: red;
  }
}

＆＃13;

调整移动设备上的字体大小

3 个答案: