许多小哥哥小姐姐在写前端的时候特别懊恼,在我的电脑上样式明明很漂亮,但是稍微换个小屏幕电脑或者手机端查看,惨不忍睹。怎么解决呢?
好了,在看代码之前,让我们先来理理思路,理清了思路,实现起来就不难了。
我们来定义样式,在宽度大于1200px的时候是什么a样式,在屏幕小于750px时是b样式,在屏幕小于414时(一般等于或小于414就是手机端了)是c样式,到这来有的童鞋说: 那我这不是很麻烦,要写那么多次?或者:直接js判断屏幕大小不就可以啦!好吧。。
麻烦?只有不写代码才不麻烦
js判断?两句css3代码实现的效果,为啥还要去写js
说不过了,上图
这是我屏幕大于1200px时的效果
这是我屏幕小于750px时(一般是平板)的效果
这是我屏幕小于414px时(一般是手机)的效果
到这里是不是看明白了,怎么写了,其实也要不了几行代码,改定位的定位,改距离的距离。
/*最大屏幕的,直接宽度100%*/
<style>
.Data_Company{
width: 100%;
margin: 0 auto;
}
/*屏幕小于1200px时*/
@media only screen and (max-width: 1200px){
.Data_Company{
width: 80%;
margin: 0 auto;
}
}
/*屏幕小于750px时*/
@media only screen and (max-width: 750px){
.Data_Company{
width: 50%;
margin: 0 auto;
}
}
/*屏幕小于414px时*/
@media only screen and (max-width: 414px){
.Data_Company{
width: 100%;
padding:0px 20px;
}
}
</style>
看明白了吧,我上面效果图的样式是less写的,考虑到新手的感受,我没有直接上源码,只提供了上图的代码作为参考,不过其实less也就是css,简单点理解就是嵌套式的css,想学习了解的去度个娘,她会告诉你。嘎嘎。。。