Question

@media only screen and (max-width: 480px) {
   #media_wrapper {
    height: 100%; //// ?????
    display: inline-block;
   }
}
#media_wrapper {
  height: 100%;
  display: none;
}

如您所见，该元素不适用于大屏幕display: none;，但是在尝试例如以下操作后，我不知道如何正确设置查询中的显示属性以使其显示在小屏幕上： {1}}或block，结果为1-不显示任何内容。我在做什么错了？

Answer 1

尝试一下

查看演示 HERE

反转

CSS：

 <input type="text" placeholder="input-todo-text" name="addTodo" class="text"/>







const renderTodos = function(todos, filters) { 
  const filter = todos.filter(function(todo) {

    if(todo.text.toLowerCase().includes(filters.searchText.toLowerCase()) && filters.searchText!="")
    {
      console.log(todo);
      return todo;
    }
  })

Answer 2

最好的方法是更改命令顺序：

请参见小提琴：https://jsfiddle.net/17d6hxsL/5/

public class ActivitySixth extends AppCompatActivity {
    private TextView tv1;
    private TextView tv3;
    private ConstraintLayout mConstraintLayout;
    private static final int ID_CONS_LAY = 160;
    private static final int ID_TV1 = 160;
    private static final int ID_TV3 = 160;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sixth);

        mConstraintLayout = findViewById(R.id.parent_Constraint);
        ConstraintSet set = new ConstraintSet();
        set.clone(mConstraintLayout);

        tv1 = new TextView(this);
        tv3 = new TextView(this);

       tv1.setText("TextView number ONE");
       tv3.setText("TextView number THREE");

       tv1.setId(ID_TV1);
       tv3.setId(ID_TV3);

       mConstraintLayout.addView(tv1);
       mConstraintLayout.addView(tv3);

       set.connect(tv1.getId(), ConstraintSet.LEFT, R.id.parent_Constraint, ConstraintSet.LEFT, 0);
       set.connect(tv3.getId(), ConstraintSet.RIGHT, R.id.parent_Constraint, ConstraintSet.RIGHT, 0);
       set.applyTo(mConstraintLayout);
}

#media_wrapper {
  height: 100%;
  display: none;
}
@media only screen and (max-width: 480px) {
   #media_wrapper {
    display: block;
   }
}

.wrapper{
  height:100%;
}

或者您应该设置<div class="wrapper"> <div id="media_wrapper"> Hello </div> </div>以允许覆盖：

请参见小提琴：https://jsfiddle.net/17d6hxsL/4/

!important

@media only screen and (max-width: 480px) {
   #media_wrapper {
    display: block!important;
   }
}
#media_wrapper {
  height: 100%;
  display: none;
}
.wrapper{
  height:100%;
}

发出媒体请求时使该项目处于活动状态

2 个答案: