Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Социальные группы Поиск Сообщения за день Заказать работу  
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
1

Разное отображение на 2-х мониторах

04.08.2018, 16:02. Показов 1263. Ответов 14
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Верстаю макет на ноутбуке и с помощью browser-sync смотрю результат на компьютере и получается немного по разному.
На первом скрине результат на мониторе компьютера второй на ноуте. Разрешение у обоих мониторов 1920х1080
0
Лучшие ответы (1)
Сообщение: #12580082
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 04.08.2018, 16:02
Ответы с готовыми решениями:

Нормальное отображение, на разных мониторах
Всем привет форумчане, возникла такая вот проблемка, в колледже пишу сайт на обычном ЭЛТ мониторе,...

Отображение сайта на мониторах с большим разрешением
Добрый день, уважаемые форумчане! Это мой первый сайт, не судите строго. staffbeauty.ru Вроде...

Верстка из PSD - шаблона и отображение на разных мониторах
Доброго времени суток! Взялся первый раз сверстать страницу из PSD-шаблона. Скачал бесплатный...

Отображение на мониторах с разным разрешением
Собственно суть вопроса в названии темы. я Сделал программу на мониторе с разрешением 1600х900, а...

14
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
04.08.2018, 16:03  [ТС] 2
Скрины
Миниатюры
Разное отображение на 2-х мониторах   Разное отображение на 2-х мониторах  
0
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,709
04.08.2018, 16:10 3
6elka1703, на скринах масштаб разный, думаю верстка тут не при чем.
0
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
04.08.2018, 16:25  [ТС] 4
Mr Coder, всмысле? масштаб 100% Просто 1 скрин с компа второй с ноута
0
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
04.08.2018, 16:33 5
6elka1703, используй KMSauto для активации винды.
Цитата Сообщение от 6elka1703 Посмотреть сообщение
Разрешение у обоих мониторов 1920х1080
Разрешение то одно, но размер (дюймы) у мониторов то разные.
Посмотри какие стили применяются у ноутбука. Ведь размеры монитора разные вот и при меньшей ширине экрана верстка и сдвигается, особенно если центрирование элементов задано на глаз.
И на всякий случай сбрось масштаб в браузере, может это действительно он ctrl+0
0
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
04.08.2018, 16:35  [ТС] 6
Freeze_Breeze, а как это исправить?
0
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
04.08.2018, 16:40 7
6elka1703, что именно исправить?
0
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
04.08.2018, 16:43  [ТС] 8
Freeze_Breeze, ну чтоб на ноуте и на компе одинаково отображалось
0
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
04.08.2018, 16:47 9
6elka1703, А Вы сначала покажите что Вы наверстали
0
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
04.08.2018, 16:56  [ТС] 10
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.min.css">
</head>
 
<body>
 
    <header class="header">
        <div class="container">
            <div class="heading clearfix">
                <img src="img/logo.png" alt="" class="logo">
                <nav class="nav-menu">
                    <ul class="menu">
                        <li class="menu__item"><a href="#" class="menu__link">home</a></li>
                        <li class="menu__item"><a href="#" class="menu__link">Services</a></li>
                        <li class="menu__item"><a href="#" class="menu__link">portfolio</a></li>
                        <li class="menu__item"><a href="#" class="menu__link">about</a></li>
                        <li class="menu__item"><a href="#" class="menu__link">contact</a></li>
                    </ul>
                </nav>
            </div>
 
            <div class="titles">
                <div class="titles__first">
                    Welcome To Our Studio
                </div>
                <h1>it's nice to Meet you</h1>
            </div>
 
            <a href="#" class="button">tell me more</a>
 
        </div>
    </header>
 
    <main class="main">
        <section class="page_services">
            <div class="container">
                <div class="title">
                    <h2>services</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur.</p>
                </div>
                <div class="services">
                    <div class="services__item">
                        <img src="img/icon1.png" alt="">
                        <h3>E-Commerce</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, libero quo suscipit praesentium earum voluptatem sint d.</p>
                    </div>
                    <div class="services__item">
                        <img src="img/icon2.png" alt="">
                        <h3>Responsive Web</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat animi distinctio ut non libero nostrum mollitia</p>
                    </div>
                    <div class="services__item">
                        <img src="img/icon3.png" alt="">
                        <h3>Web Security</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero enim harum, deleniti temporibus saepe unde, voluptates </p>
                    </div>
                </div>
            </div>
        </section>
 
        <section class="page_portfolio">
            <div class="container">
                <div class="title">
                    <h2>our portfolio</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur.</p>
                </div>
                <div class="portfolio">
                    <div class="portfolio__item">
                        <img src="img/img1.jpg" alt="">
                        <div class="overlay">
                            <h2>wefwfw</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odio!</p>
                        </div>
                    </div>
 
                    <div class="portfolio__item">
                        <img src="img/img2.jpg" alt="">
                        <div class="overlay">
                            <h2>wefwfw</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odio!</p>
                        </div>
                    </div>
 
                    <div class="portfolio__item">
                        <img src="img/img3.jpg" alt="">
                        <div class="overlay">
                            <h2>wefwfw</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odio!</p>
                        </div>
                    </div>
 
                </div>
            </div>
        </section>
 
        <section class="page_about">
            <div class="container">
                <div class="title">
                    <h2>about us</h2>
                    <p>Proin iacuils purus consequal sem cure</p>
                </div>
                <div class="about">
                    <div class="about__item">
 
                        <div class="about__description">
                            <h3>JULY 2010</h3>
                            <h3>Our Humble Beginnings</h3>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p>
                        </div>
 
                        <div class="about__img">
                            <img src="img/about1.jpg" alt="">
                        </div>
 
                    </div>
 
                    <div class="about__item">
 
                        <div class="about__description">
                            <h3>JANUARY 2011</h3>
                            <h3>Facing Startup Battles</h3>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p>
                        </div>
 
                        <div class="about__img">
                            <img src="img/about2.jpg" alt="">
                        </div>
 
                    </div>
 
                    <div class="about__item">
 
                        <div class="about__description">
                            <h3>DECEMBER 2012</h3>
                            <h3>Enter The Dark Days</h3>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p>
                        </div>
 
                        <div class="about__img">
                            <img src="img/about3.jpg" alt="">
                        </div>
 
                    </div>
 
                    <div class="about__item">
 
                        <div class="about__description">
                            <h3>FEBRUARY 2014</h3>
                            <h3>Our Triumph</h3>
                            <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p>
                        </div>
 
                        <div class="about__img">
                            <img src="img/about4.jpg" alt="">
                        </div>
 
                    </div>
                </div>
            </div>
        </section>
    </main>
    
    <footer class="footer">
        <div class="container">
            <p class="copy">&copy; Copyright 2018 FreebiesXpress.com</p>
        </div>
    </footer>
</body>
 
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

@import "libs"
 
body
    font-family: Arial, sans-serif
    color: #222
    
*
    box-sizing: border-box
 
.clearfix:after
    content: ''
    display: table
    width: 100%
    clear: both
 
.header
    background-image: url(../img/first-bg.jpg)
    background-repeat: no-repeat
    background-size: cover
    background-position: center
    padding-bottom: 160px
 
.logo
    margin-top: 42px
    float: left
        
.container
    max-width: 67.2%
    margin: 0 auto
 
.nav-menu
    width: 56%
    float: right
    margin-top: 32px
    
.menu
    width: 100%
    display: flex
    justify-content: space-between
    list-style: none
    
.menu__link
    text-decoration: none
    text-transform: uppercase
    color: #fff
    font-size: 14px
    padding-bottom: 10px
    &:hover
        border-bottom: 1px solid #fff
    
.titles__first
    color: #fff
    font-size: 40px
    text-transform: uppercase
    text-align: center
    margin-top: 180px
    
.titles h1
    color: #fff
    font-size: 75px
    text-transform: uppercase
    text-align: center
    margin: 0
    margin-top: 40px
    
.button
    background-color: #fed136
    border: 1px solid transparent
    color: #484543
    font-size: 18px
    font-weight: bold
    text-transform: uppercase
    border-radius: 3px
    text-decoration: none
    display: block
    text-align: center
    width: 240px
    padding: 20px 0px
    margin: 0 auto
    margin-top: 50px
    transition: .3s ease
    &:hover
        border-color: #fed136
        background-color: transparent
        color: #fed136
 
.title
    margin-top: 100px
    margin-bottom: 60px
    
.title h2
    font-size: 40px
    font-weight: bold
    text-align: center
    text-transform: uppercase
    margin: 0
 
.title p
    font-size: 16px
    color: #777
    text-align: center
    margin: 10px
    
.services
    width: 100%
    display: flex
    flex-wrap: wrap
    justify-content: center
    margin-top: 90px
    margin-bottom: 190px
    
.services__item
    width: 28%
    text-align: center
    
.services__item:nth-child(2)
    margin: 0 80px
    
.services__item h3
    font-size: 18px
    font-weight: bold
    margin-bottom: 10px
    
.services__item p
    font-size: 14px
    color: #777
    
.portfolio
    width: 100%
    display: flex
    flex-wrap: wrap
    justify-content: center
    margin-top: 70px
    margin-bottom: 190px
    
.portfolio__item    
    width: 28%
    position: relative
    overflow: hidden
    img
        width: 100%
        opacity: 1
        filter: alpha(opacity=100)
        transition: all .4s ease-in
    .overlay
        position: absolute
        left: 0
        top: 0
        right: 0
        bottom: 0
        padding: 10px
        text-align: center
        padding-top: 20%
        background-color: rgba(0,0,0,0.8)
        color: #fff
        filter: alpha(opacity=0)
        opacity: 0
        transform: scale(0) rotate(-180deg)
        transition: all .4s ease-in
    &:hover img
        filter: alpha(opacity=0)
        opacity: 0
        transform: scale(0)
        transition-delay: 0s
    &:hover .overlay
        filter: alpha(opacity=100)
        opacity: 1
        transform: scale(1) rotate(0deg)
        
 
.portfolio__item:nth-child(2)
    margin: 0 80px
    
.about__item
    display: flex
    align-items: center
    margin-bottom: 100px
    
.about__item:nth-child(even)
    flex-direction: row-reverse
    padding-right: 20px
    .about__description
        text-align: left
    p
       padding: 0 170px 0 0
 
.about__description
    text-align: right
    width: 40%
 
 
.about__description h3
    margin-top: 0
    margin-bottom: 7px
    font-size: 18px
    
.about__description p
    font-size: 14px
    color: #777
    padding: 0 0 0 170px
 
.about__img
    margin: 0 30px
    
.copy
    color: #777
    text-align: center
    font-size: 14px
    padding: 20px 0 109px 0
0
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
04.08.2018, 17:17 11
6elka1703, значит max-width: 67.2%;, clearfix width: 100%;? Почитайте Итан Маркотт. Отзывчивый веб-дизайн
Если хотите нормально верстать не слушайте Андрея Гаврилова, парень неплох но только на первых парах, лучше его смотрите https://www.youtube.com/user/dmitrylavr он расскажет больше и качественней.
0
1025 / 678 / 295
Регистрация: 04.04.2013
Сообщений: 2,709
04.08.2018, 17:31 12
Цитата Сообщение от 6elka1703 Посмотреть сообщение
Freeze_Breeze, ну чтоб на ноуте и на компе одинаково отображалось
Думаю всему виной плотность пикселей на дюйм https://vc.ru/19864-pixels-in-mobile-design, поэтому визуально будто масштам разный на скринах.
0
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
04.08.2018, 17:35  [ТС] 13
Freeze_Breeze, смотрел его норм парень, все понятно объясняет. А что не так max-width: 67.2%;, clearfix width: 100%;
0
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
04.08.2018, 17:44 14
Лучший ответ Сообщение было отмечено 6elka1703 как решение

Решение

6elka1703,
Цитата Сообщение от 6elka1703 Посмотреть сообщение
max-width: 67.2%;
Ширина контейнера обычно задается в px, то есть max-width: 1140px; (жесткая ширина контейнера, на то он и контейнер, но не в % еще и .2 )
Цитата Сообщение от 6elka1703 Посмотреть сообщение
clearfix width: 100%;
Этому классу не задают ширину, а еще и в процентах.
1
91 / 85 / 27
Регистрация: 29.10.2016
Сообщений: 928
04.08.2018, 18:00  [ТС] 15
Freeze_Breeze, вспомнил max-width в процентах задал что проверить кое что и забыл поменять обратно.
Ну все равно с моей проблемой это вроде не связано же

Добавлено через 5 минут
Freeze_Breeze, помогло, спасибо
0
04.08.2018, 18:00
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 04.08.2018, 18:00
Помогаю со студенческими работами здесь

Отображение сайта на разных мониторах
Добрый день. Есть сайт, адаптивный под мобильные устройства, ссылка на сайт. При открытии на...

Разное отображение
Народ такой у меня трабл.Через админку шаблон Joomla в Hrome отображается нормально,а через Opera...

Разное отображение в браузерах
Здравствуйте! Хочу проконсультироваться. Когда я сама делала сайт и он по-разному отображался в...

Разное отображение в браузерах
Добрый день. Помогите пожалуйста. Вроде бы проверила страницы на валидность. Все хорошо. Но...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru