Question

如何根据屏幕尺寸自动缩小我制作的圆圈的宽度和高度？

我将宽度和高度设置为componentDidMount(){ this.CheckLoginStatus() } CheckLoginStatus = async () => { const token = localStorage.getItem('token'); const bearer = "Bearer" if(token === null){ this.setState({success:false}) } await axios.get('http://127.0.0.1:8000/api/details',{ headers:{ Authorization:bearer+ ' ' +token } }) .then(response => { if(response.status === 200){ this.setState({success:true,results:response.data.success}) } }).catch(err => { localStorage.clear() }) }

代码：

40px

我尝试使用calc来计算宽度和高度

.circle {
    display: block;
    width: 40px;
    height: 40px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-color: #b7b7b7;
    margin-right: 2%;
    outline: none;
    -webkit-transition: ease-in .5s;
    -o-transition: ease-in .5s;
    -moz-transition: ease-in .5s;
    transition: ease-in .5s;
}

但是它似乎不起作用。我听到一些消息说calc是实现这一目标的关键。我正在使用 1920px 的容器，并且最小屏幕尺寸为 320px 。有没有合适的方法来实现宽度和高度的calc函数？

谢谢

Answer 1

您可以将// declare ViewPager viewPager in the beginning of class. viewPager = findViewById(R.id.pager); viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(), MainActivity.this); viewPager.setAdapter(viewPagerAdapter); TabLayout tabLayout = findViewById(R.id.tabLayout); tabLayout.setupWithViewPager(viewPager); public void loadFragments() { for (int i = 0; i < walletList.size(); i++) { WalletClass object = walletList.get(i); fragment frag = new fragment().newInstance(object); viewPagerAdapter.addFragment(frag, object); viewPager.setAdapter(viewPagerAdapter) } }和vw（分别为可用宽度和高度的1％）与媒体查询配合使用。一个例子：

vh

缩小屏幕尺寸时调整宽度和高度

1 个答案: